DataTable 1.10.15 表显示所有结果，而不是在 PHP 中显示 10 行

Question

我正在使用 CodeIgniter 3 来设置应用程序。该应用程序有一个日志页面，该页面应该在屏幕上显示来自所需 MySQL 表的十条最新记录。数据作为 JSON 对象接收。然后，DataTable 应该允许用户相应地分页到其他记录。问题是即使返回的记录超过十个，也会显示所有返回的记录。

这是我的 CDN 链接：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<script charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

这里是 jQuery 代码：

var Table = {
/**
 *
 * @function init
 * @description Initializes the table object
 * @memberOf Table
 * @param {string} name Name used as dom element id
 * @param {string} url Url to data source
 * @param {array} columns Column names
 * @returns void
 */
init: function(name,url,columns) {
    this.col_array = columns;
    this.name = name;
    this.url = url;
    this.createTable();

    $('table#'+this.name).DataTable( {
            serverSide: true,
            displayStart: 10,
            sDom: '<"top"lp>t<"bottom"i><"clear">',
            ajax: url,
            columns: this.getColumns()
    });

    var dTable = $('table#'+this.name).DataTable();
    for(var i in this.col_array){
        $(dTable.column(i).header()).text(this.col_array[i]);
    }

},
/**
 * @function createTable
 * @description Creates a dom element for the table object
 * @memberOf Table
 * @returns void
 */
createTable: function() {
    $("div#table ").append('<table id="'+this.name+'" class="display" cellspacing="0" width="100%" />');
},
/**
 * @function getColumns
 * @description Return an array of column data
 * @memberOf Table
 * @returns {Array|Table.getColumns.c}
 */
getColumns: function(){
    var c = [];

    for(var k in this.col_array){
        c.push({ "data": this.col_array[k]});
    }

    return c;
},
};

这是我对表格的 HTML 标记：

<div id="table" style="width:95%; margin-left:10px;"></div>

这是我在 js 文件中调用表格的方式：

Table.init('logs', location + '/get_data', ['Username', 'Date', 'Login', 'Logout']);

Answer 1

实际上，我发现您的代码存在许多问题。看看我的内联 cmets。 此外，您并没有真正维护状态（从我上面看到的），所以我会使用常规函数而不是创建对象。

    var Table = {
        /**
         *
         * @function init
         * @description Initializes the table object
         * @memberOf Table
         * @param {string} name Name used as dom element id
         * @param {string} url Url to data source
         * @param {array} columns Column names
         * @returns void
         */
        init: function (name, url, columns) {
            this.col_array = columns;
            this.name = name;
            this.url = url;
            this.createTable();
            // ***************************** I added the datatable to your object instead of a variable
            this.dTable = $('table#' + this.name).DataTable({
                // **************************** this shouild be false if you are sending all of the data 
                // ************ back from the server
                serverSide: false,
                // ****************************** This attribute causes to start displaying data
                // at row ten, is that what you intended?  otherwise, used length if you are setting rows per page
                displayStart: 10,
                // rows per page
                pageLength:10,
                // sDom is legacy, just use "dom"
                "dom": '<"top"lp>t<"bottom"i><"clear">',
                ajax: url,
                columns: this.getColumns()
            });

            //    var dTable = $('table#' + this.name).DataTable();

            //  ************** this problem will not work. See note below in getColumns section
           // for (var i in this.col_array) {
           //     $(dTable.column(i).header()).text(this.col_array[i]);
          //  }

        },
        /**
         * @function createTable
         * @description Creates a dom element for the table object
         * @memberOf Table
         * @returns void
         */
        createTable: function () {
            // ***************** you need to add the thead tag for dynamic columns
            $("div#table ").append('<table id="' + this.name + '" class="display" cellspacing="0" width="100%" ><thead></thead><tbody></tbody></table>');
        },
        /**
         * @function getColumns
         * @description Return an array of column data
         * @memberOf Table
         * @returns {Array|Table.getColumns.c}
         */
        getColumns: function () {
            var c = [];

            for (var k in this.col_array) {

                // ***************************** when using dynamic columns (columns not a part of your html)
                // ***************** you need to add  the title attribute
                c.push({ "data": this.col_array[k], "title": this.col_array[k] });
            }

            return c;
        },
    };