表javascript分页和排序

Question

如何搜索和分页表？另外，如何对所有列升和降进行排序？现在，我只能以一种方式做到这一点。 表从javascript加载数据。

const users = [
    {
      obec: 'Bratislava',
      okres: 'Bratislava',
      kraj: 'Bratislavský',
      obyvatelov: 411228,
      celkovo: 1,
      eco: 1,
      peo: 1,
      gov: 131,
      mob: 203,
      env: 81,
      liv: 3  }];

    //LOAD DATA
    let data = users.map(createRow);
    $('tbody').html(data);

    // SORT TABLE
    $('table thead td').on('click', e => {
      let $this = $(e.currentTarget);

      // Hide / show caret
      $('.fa-caret-down').hide();
      $this.find('.fa-caret-down').show();

      // Get type and sort data
      let type = e.target.id;
      let sorted = sort(users, type);

      // Create rows and set table HTML
      let data = sorted.map(createRow);
      $('tbody').html(data);
    });

    function createRow(user) {
      let row = `<tr>
                  <td>${user.obec}</td>
                  <td>${user.okres}</td>
                  <td>${user.kraj}</td>
    			  <td>${user.obyvatelov}</td>
    			  <td>${user.celkovo}</td>
    			  <td>${user.eco}</td>
    			  <td>${user.peo}</td>
    			  <td>${user.gov}</td>
    			  <td>${user.mob}</td>
    			  <td>${user.env}</td>
    			  <td>${user.liv}</td>
                 </tr>`;
      return row;
    }

    function sort(obj, type) {
      let sorted = obj.sort((b, a) => 
      type === 'obyvatelov' ? b.obyvatelov - a.obyvatelov :
      type === 'celkovo' ? b.celkovo - a.celkovo :
      type === 'eco' ? b.eco - a.eco :
      type === 'peo' ? b.peo - a.peo :
      type === 'gov' ? b.gov - a.gov :
      type === 'mob' ? b.mob - a.mob :
      type === 'env' ? b.env - a.env :
      type === 'liv' ? b.liv - a.liv :
      a.obec.localeCompare(b.obec));

      return sorted;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- partial:index.partial.html -->
    			<table class="table table-striped table-bordered" cellspacing="0" style="width:100%;">
    				 <thead>
    					<tr>
    						<td id="obec">Obec <i class="fa fa-caret-down"></i></td>
    						<td id="okres">Okres</td>
    						<td id="kraj">Kraj</td>
    						<td id="obyvatelov">Počet obyvateľov <i class="fa fa-caret-down"></i></td>
    						<td id="celkovo">Celkové poradie<i class="fa fa-caret-down"></i></td>
    						<td id="eco">Economy <i class="fa fa-caret-down"></i></td>
    						<td id="peo">People <i class="fa fa-caret-down"></i></td>
    						<td id="gov">Governance <i class="fa fa-caret-down"></i></td>
    						<td id="mob">Mobility <i class="fa fa-caret-down"></i></td>
    						<td id="env">Environment <i class="fa fa-caret-down"></i></td>
    						<td id="liv">Living <i class="fa fa-caret-down"></i></td>
    					</tr>
    				 </thead>
    				 <tbody>
    				</tbody>
    				</table>
    				<!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src="new.js"></script>

我是javascript新手，无法解决此问题。我染红了整个互联网，但没有运气。

这就是我想要的样子。