5

我有一个启用了分页的 DataTable，我需要禁用此设置并通过按一个按钮在没有分页器的情况下显示所有结果。

我正在尝试访问已经定义的设置，将分页更改为 false，然后重新绘制表格，但它不起作用。我搜索并尝试了类似的论坛主题但没有成功。

知道如何实现吗？

这是我的不工作代码的演示

HTML：

<div id="main_wrapper">
    <button class="form_button destroy_pager" type="button" onclick="" title="Destroy pager">Destroy pager</button>

    <table id="example" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

jQuery：

$(document).ready(function() {

    var oTable = $('#example').DataTable({
        'bPaginate': true,
        'iDisplayLength': 5
    });

    $('button.destroy_pager').on('click', function() {        
        var oSettings = oTable.settings;
        oSettings.bPaginate  = false;
        oTable.draw();
    });


});

编辑：我需要在初始化 DataTable 时启用寻呼机。问题是我必须在按下按钮后禁用它。

提前致谢

4

4 回答 4

4

您应该销毁并重新初始化数据表，并将bPaginate选项设置为false单击按钮 

 $(document).ready(function() {
    var table =  $('#example');
    var tableOptions = {
        'bPaginate': true,
        'iDisplayLength': 5
    };
   table.DataTable(tableOptions);
   $('button.destroy_pager').on('click', function() {        
        table.DataTable().destroy()
        tableOptions.bPaginate = false;
        table.DataTable(tableOptions);
    });
});

演示

于 2015-05-07T14:45:27.713 回答
0

使用sDom选项。尝试sDom: 'ft'选项。这对我有用。看看这里：http ://datatables.net/usage/options#sDom

于 2017-09-18T05:10:29.130 回答
0

在设置每页的行号之前，我有一个准备表格样式的想法。但这让我想知道 datatable api 如何存储元素样式。如果我可以同时设置表格样式和声明数据表对象。这将使我的代码更具性能

于 2022-02-03T03:28:19.973 回答
-2 
$('#example').DataTable({
    'bPaginate': false       
});

使用上面的代码。

jsFiddle

于 2015-05-07T14:39:34.207 回答