DataTables-创建自定义分页样式(加载更多样式）

我想为DataTable使用一种移动友好的分页样式，我只想在单击时加载更多行的按钮，它将在当前可见行下附加行。

我知道这在DataTables中不是一个默认选项，但我相信创建它应该不会很困难。有人创建过这个分页方法吗？或者在DataTable的表上看到过它的使用吗？

如果不是，我如何修改表的代码https://jsfiddle.net/6k0bshb6/16/使用这种分页样式使我的表对移动友好。

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>Hidden Value: ' + value + '</div>';
  }
// Initialization of dataTable and settings.
  $(document).ready(function () {
      var dataTable = $('#example').DataTable({
       bLengthChange: false,
       "pageLength": 5,
       "pagingType": "simple",
       "order": [[ 7, "asc" ]],
       "columnDefs": [
            {
                "targets": [ 5 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 6 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true
            }
        ],
// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
       initComplete: function () {
            this.api().columns(5).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#control-panel").find("div").eq(1))
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });
// This function is for handling Child Rows.
    $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row(tr);
          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
    });
// Checkbox filter function below is for filtering hidden column 6 to show Free Handsets only.
    $('#checkbox-filter').on('change', function() {
        dataTable.draw();
    });
    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        var target = '£0.00';
        var position = data[6]; // use data for the position column
        if($('#checkbox-filter').is(":checked")) {
            if (target === position) {
            return true;
         }
         return false;
        }
        return true;
      }
    );
});

更新：我在DataTables网站上找到了一些关于如何做到这一点的信息，尽管我不完全理解如何将其集成到我的表中。

https://datatables.net/forums/discussion/3920/twitter-facebook-style-pagination

你可以做的（我没有尝试过，但我想不出为什么它不起作用…）是将滚动加载间隙（加载新数据时滚动底部之前的像素数）设置为负数（http://datatables.net/usage/options#iScrollLoadGap），然后在表的底部添加一个小按钮（可能需要使用fnDrawCallback），单击该按钮将加载下一个数据集（fnPageChange（'next'）应该这样做）。

有人知道我如何用我的桌子做这件事吗？有人能告诉我如何在jsfiddle上做到这一点吗？

更新2:数据表管理员的响应https://datatables.net/forums/discussion/35148/load-more-style-twitter-style-pagination-custom#latest

您提到的iScrollLoadGap选项在1.10中不可用-无限滚动在1.10中被删除，并且该选项也随之删除。

然而，基本原则仍然存在——你可以用户需要按下按钮来加载更多行（或者增加页面大小或使用rows.add（）添加更多行）或使用滚动检测做同样的事情。

Allan