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

Posted 2023-05-07

【中文标题】DataTables - 创建自定义分页样式（加载更多样式）

【英文标题】：DataTables - Create Custom Pagination Style (Load More Style)

【发布时间】：2016-09-15 03:07:46

【问题描述】：

我想为 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() 添加更多行）或使用滚动 检测做同样的事情。

艾伦

【参考方案1】：

解决了..

<button id="button" type="button">Page +5</button> 

//Alternative pagination
$('#button').on( 'click', function () 
    var VisibleRows = $('#example>tbody>tr:visible').length;
    var i = VisibleRows + 5;
    dataTable.page.len( i ).draw();
 );

【参考方案2】：

你可以使用类似的东西：

$(window).on("swipeleft", $("#example_next").click());

$(window).on("swiperight", $("#example_previous").click());

它只适用于移动设备并使用您现有的功能...

【讨论】：

不是我要找的东西，我还想在我的主网站上使用显示更多分页样式 - 无论如何你可以帮我更新"pageLength": 5按钮点击吗？每次点击 +5 行？

您是否尝试过将“5”替换为一个为其分配新值并刷新 DOM 的变量？或者那个代码是你想要帮助的？