Question

我正在尝试使用Node.js分页Datatable。这是我的代码HTML

<button id="btnSearch" type="submit" class="btn btn-responsive"><i class="icon-search"></i>&nbsp;Search</button>

<div class="box-body table-responsive no-padding">
    <div id="tableContainer">
        <table class="table table-hover" id="dataTables1">
            <thead>
            <tr>
                <th class="text-left">base</th>
                <th class="text-left">base1</th>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="text-center">
            <img id="loading-image" src="../dist/img/loading_spinner.gif" style="display: none;" />
    </div>
</div>

这是脚本代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#btnSearch").click(function () {
        RefreshTable("#dataTables1");
    });

    function buildAjaxSourcUrl() {
        var orgURL = '?schemename=abc';

        if (orgURL.length > 1) {
            orgURL = 'http://127.0.0.1:3000/statistic' + orgURL;
        } else {
            orgURL = 'http://127.0.0.1:3000/statistic';
        }
        return orgURL;
    }

    function RefreshTable(tableId) {
        var urlData = buildAjaxSourcUrl();
        table = $(tableId).dataTable();
        table._fnClearTable(table.oSettings);
        table.fnDestroy();
        table.fnDraw(true);
        var table2 = $(tableId).dataTable({
            "bServerSide": true,
            "bProcessing": true,
            "responsive": true,
            "bDestroy": true,
            "bAutoWidth": false,
            oLanguage: {
                sProcessing: "<img src='../dist/img/loading_spinner.gif'/>"
            },
            "aLengthMenu": [2, 30, 50, 100],
            "pageLength": 2,
            "sAjaxDataProp": "data",
            "sAjaxSource": urlData,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
            "sPaginationType": "full_numbers",//"full_numbers",
            "columns": [
                { "data": "base1" },
                { "data": "base2" }
            ]
        });
    }
</script>

这是我的代码服务器端节点js

    exports.test = function(req, res) {
    console.log("test");

    var start = req.body.iDisplayStart;
    var pageSize = req.body.iDisplayLength;

    ManagerExport.getTotalUser(function(count){
        ManagerExport.getUser(start, pageSize, function(Users) {


            var response = {
                draw: 2,
                recordsTotal: count[0].count,
                recordsFiltered: count[0].count,
                data: Users
            };
            console.log(response);
            res.send(response);

        });
    });
}

在视图中，当我点击按钮搜索时，我得到2条用户记录之后我点击按钮索引2然后页面停留在处理上，请建议我解决方案来解决这个问题。感谢冒险

Answer 1

当bProcessing为true（您在构造函数中指定为datatable）时，将显示该处理图像。在ajax调用返回后，您可以尝试将值设置为false，以使其消失。

Answer 2

确保在返回datatable之前将draw param转换为int，并根据datatable发送的参数返回draw参数。

   def data=['draw':Integer.parseInt(params.draW),...]
    return data as JSON

单击页面索引时，数据表停留在处理上

2 个答案: