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