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

Posted 2023-05-09

【中文标题】DataTable 1.10.15 表显示所有结果，而不是在 PHP 中显示 10 行

【英文标题】：DataTable 1.10.15 table is displaying all results rather than displaying 10 rows in PHP

【发布时间】：2017-12-29 06:10:37

【问题描述】：

我正在使用 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"  />');
,
/**
 * @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']);

【问题讨论】：

当 serverSide 设置为 true 时，由服务器而不是客户端发送回十行。如果您实际上将所有结果发回，请删除 serverSide 或将其设置为 false，然后客户端上的 DataTables 将处理它。

谢谢。关闭 serverSide 工作。

【参考方案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"  ><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;
        ,
    ;

【讨论】：

我会考虑你的建议。代码看起来不错。感谢您的意见。