如何使用javascript为动态html表格引入分页和排序？答案

【问题标题】：how to introduce pagination and sorting for a dynamic html table using javascript?如何使用javascript为动态html表格引入分页和排序？
【发布时间】：2017-10-16 03:28:05
【问题描述】：

我的 html 页面包含 ajax，这有助于动态创建表格。

<title>Clients</title>
</head>
<body>
<table style="width:100%" id="clients_data">
<caption>Clients</caption>
  <tr>
    <th>Clients</th>
    <th>Number of Sites</th> 
    <th>Reset the Processing</th> 
  </tr>
  </table>
<script>
var myTable;

$(document).ready(function () {
    loadCustomers();
});


function loadCustomers() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/cache/getCustomers',
        dataType: 'json',
        success: function(data) {
            var rows = [];    
            $.each(data,function(id,value) {
                      rows.push('<tr><td><a href="clientSiteInfo.html?client='+id+'">'+id+'</td><td>'+value+'</td><td><button type="button" onclick="reset(\''+id+'\')">Reset</td></tr>');
                    });
            $('#clients_data').append(rows.join(''));
        }
    });
};
</script>
</body>
</html>

在运行时，我可能在表中填充了 100 行。如何添加分页，使用 jquery 对该表进行排序？

【问题讨论】：

标签： javascript jquery html pagination

【解决方案1】：

这是一个使用jQueryeach()、index()、toggle() 和Anonymous function 的非常基本的示例。我正在利用 HTML 5 data-* attributes 跟踪我的位置并设置要增加/减少的项目数。

您可以使用插件或编写自己的代码来使分页变得简单或复杂，只要您愿意。虽然我强烈建议使用 AJAX 来填充您的结果，但加载 1000 个结果以隐藏/显示可能会降低系统速度。

/* Variable Defaults */
var total    = $('tbody > tr').length;
var position = $('tbody').data('position');
var jump     = $('tbody').data('jump');
var paginate = function(position, jump) {
    /* Show Default Items */
    $('tbody > tr').each(function() {
        /* Variable Defaults */
        var index = $(this).index();

        /* Condition */
        var condition = (index >= position) && (index < position + jump);

        /* Hide/Show Item */
        $(this).toggle(condition);

        /* Set Disabled Status */
        $('.less').prop('disabled', (position - jump) < 0);
        $('.more').prop('disabled', (position + jump) >= total);
    });
};

/* Set Default Text */
$('.count').text(jump);

/* Init Paginate */
paginate(position, jump);

/* Bind Click Events to "Less" and "More" Button */
$('.less, .more').on('click', function() {
    /* Decrease/Increase Position */
    position = $(this).hasClass('less') ? $('tbody').data('position') - jump : $('tbody').data('position') + jump;

    /* Paginate */
    paginate(position, jump);

    /* Update Position */
    $('tbody').data('position', position);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Email</td>
    </tr>
  </thead>
  <tbody data-position="0" data-jump="2">
    <tr>
      <td>1</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Test McTester</td>
      <td>test@gmail.com</td>
    </tr>
  </tbody>
</table>

<button class="less">Back <span class="count">0</span></button>
<button class="more">Forwards <span class="count">0</span></button>

【讨论】：

【解决方案2】：

您可以将数据表用于您的目的： https://datatables.net/examples/basic_init/alt_pagination.html

您还可以使用 Tablesorter ： http://tablesorter.com/docs/

【讨论】：

感谢该教程非常有帮助。我在提到的指南中遇到了数据中的错误。我在这里发布了新问题..你能检查一下吗？stackoverflow.com/questions/46780285/…