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：

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

Answer 1

我实际上看到了许多与您的代码有关的问题。看看我的内联评论。 另外，你不是真的维持状态（从我上面看到的），所以我会使用常规函数而不是创建一个对象。

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; 
     }, 
    };