dataTable 分页失效

雨点打透心脏的1/2处 2021-10-08 06:34 441阅读 0赞

如果是用的是Ajax  则需要设置为同步

![Center][]

<div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>
                        IP管理
                        <a οnclick="return tonerInfoEditor()">
                        </a>
                        <button type="button" class="ipManage_restartServer btn btn-round btn-info"
                        id="ipManage_restartServer">
                            重启服务器
                        </button>
                        <small>
                            注：若修改ip信息请重启服务器
                        </small>
                    </h2>
                    <ul class="nav navbar-right panel_toolbox">
                        <li>
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up">
                                </i>
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                            aria-expanded="false">
                                <i class="fa fa-wrench">
                                </i>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="#">
                                        Settings 1
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        Settings 2
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a class="close-link">
                                <i class="fa fa-close">
                                </i>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix">
                    </div>
                </div>
                <div class="x_content">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered dataTable no-footer"
                        id="datatable">
                            <thead>
                                <tr class="headings">
                                    <th class="column-title">
                                        机器编号
                                    </th>
                                    <th class="column-title">
                                        IP地址
                                    </th>
                                    <th class="column-title">
                                        机器位置编号
                                    </th>
                                    <th class="column-title">
                                        编辑
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="table2">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

var data_all_ipManageInfo;
    //获取ip管理信息里列表
    function getIpManageInfo() {
        var code;
        $.ajax({
            type: 'POST',
            url: '/machNetSet/listAllUaMachines',
            async: false,
            success: function(data) {
                data_all_ipManageInfo = data;
                for (var i = 0; i < data.length; i++) {
                    var id = data[i].id;
                    code = code + ' <tr class="even pointer" id="tr' + i + '">' + '<td class=" ">' + data[i][0] + '</td>' + '<td class=" ">' + data[i][1] + '</td>' + '<td class=" ">' + data[i][2] + '</td>' + '<td class=" ">' + '<button class="ipManage_edit buttonCss fa fa fa-pencil-square-o fa-1g" data-toggle="tooltip" title="修改" οnclick="ipManageEditor(\'' + i + '\')">' + '</button>' + '</td>' + '</tr>'
    
                }
    
                $('#table2').empty().append(code);
            }
        });
    }
    $(document).ready(function() {
    
        getIpManageInfo();
    
        $('#datatable').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        })
    });

[Center]: /images/20211008/0cf39e86eaaf4e0a9455f8fc6572acf2.png