Question

我正在尝试使用带有Node.js的jquery 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 RefreshTable(tableId) {

        table = $(tableId).dataTable();
        table._fnClearTable(table.oSettings);
        table.fnDestroy();
        table.fnDraw(true);
        var table2 = $(tableId).dataTable({
            "bServerSide": true,
            "bProcessing": true,
            "responsive": true,
            "bAutoWidth": false,
            oLanguage: {
                sProcessing: "<img src='../dist/img/loading_spinner.gif'/>"
            },
            "aLengthMenu": [10, 30, 50, 100],
            "pageLength": 30,
            "sAjaxSource": 'http://127.0.0.1:3000/statistic?schemename=abc',
            "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",
            "aoColumns": [
                { "sName": "base", "bSortable": false },//0
                { "sName": "base1", "bSortable": false }
            ]
        });
    }
</script>

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

var async = require('async'),
    QueryBuilder = require('datatable');

var tableDefinition = {
    sTableName: 'Orgs'
};

var queryBuilder = new QueryBuilder(tableDefinition);

// requestQuery is normally provided by the DataTables AJAX call
var requestQuery = {
    iDisplayStart: 0,
    iDisplayLength: 5
};

// Build an object of SQL statements
var queries = queryBuilder.buildQuery(requestQuery);   

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

        userExport.getUserEdit(req.query.schemename, function(rows){
            res.json(queryBuilder.parseResponse(rows));
        })
    }

当我点击搜索按钮然后在服务器端我收到的schemename是＆＃39; abc＆＃39;得到了用户，但我无法将json响应到表格。在浏览器的选项卡控制台中我收到一个错误： jquery.dataTables.js：4108 Uncaught TypeError：无法读取属性＆＃39; length＆＃39;未定义，任何人帮助我摆脱这个错误或建议我解决方案来解决这个问题感谢冒险

Answer 1

将sAjaxDataProp: 'data'添加到初始化参数：

var table2 = $(tableId).dataTable({
  ...
  sAjaxDataProp: 'data',
  sAjaxSource: 'http://127.0.0.1:3000/statistic?schemename=abc',
  ...
})

原因：使用sAjaxSource时，dataTables 1.9.x期望数据格式为{ "aaData" : [...] }，这就是为什么你得到 Uncaught TypeError：无法读取未定义的属性'length'的原因/ em>的。但是，node-datatable将行导出为{ "data" : [...] }。

将数据表与node.js一起使用

1 个答案: