Ignited Datatables - 在屏幕上顯示記錄

Question

我正在使用Ignited Datatables在我的視圖中以表格方式顯示帖子。 為了正確地完成這項工作，我在過去 4 天里一直在努力，但我不明白我做錯了什么。

這是獲取數據的功能

// the Post_model
/**
* Get page data on datatables
*/
public function get_datatable() {

    $this->load->library('datatables');

    $this->datatables->select('id, title, slug, sort_description, status');
    $this->datatables->from('posts');
    return $this->datatables->generate();
}

// the posts controller
/**
* List all posts
*/
public function index() {

    $this->data['datatables'] = true;

    $this->data['data_url'] = 'admin/posts/data_ajax';
    // $this->data['posts'] = $this->post_model->get_datatable();
    // dump($this->data['pages']);

    // load view
    $this->load->view('admin/posts/index', $this->data);
}


public function data_ajax() {
    $this->output->enable_profiler(false);
    echo $this->post_model->get_datatable();
    // echo json_encode($this->post_model->get_datatable());
    exit();
}

// the view
    <table class="table dataTable table-bordered" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>ID</th>
         <th>Title</th>
         <th>Url Slug</th>
         <th>Sort Description</th>
         <th>Status</th>
      </tr>
   </thead>

   <tfoot>
      <tr>
         <th>ID</th>
         <th>Title</th>
         <th>Url Slug</th>
         <th>Sort Description</th>
         <th>Status</th>
      </tr>
   </tfoot>

   <!-- <tbody>
      <tr>
         <td colspan="5" class="dataTables_empty"></td>
      </tr>
   </tbody> -->
</table>

<?php if(isset($datatables)): ?>
    <?php echo js_tag('js/dataTables/jquery.dataTables.min.js'); ?>
    <?php echo js_tag('js/dataTables/dataTables.bootstrap.min.js'); ?>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.dataTable').DataTable({
                'bProcessing' : true,
                'bServerSide' : true,
                'sAjaxSource' : '<?php echo base_url($data_url); ?>',
                'sServerMethod' : 'POST',
                'fnServerData' : function (sSource, aoData, fnCallback) {
                    $.ajax({
                        dataType : 'json',
                        type : 'post', 
                        url : sSource,
                        data : aoData,
                        success : fnCallback,
                        "columns": [
                           { "data": "id" },
                           { "data": "title" },
                           { "data": "slug" },
                           { "data": "sort_description" },
                           { "data": "status" }
                        ]
                    });
                }
            });
        });
    </script>
<?php endif; ?>

因此，如果我像這樣從 url 訪問data_ajax()函數localhost/my-blog/admin/posts/data_ajax並 echo echo $this->page->get_datatable(); 我可以記錄

{"draw":0,"recordsTotal":2,"recordsFiltered":2,"data":[{"id":"1","title":"First post","slug":"first-post","sort_description":"This is the first post","status":"visible"},{"id":"2","title":"Second post","slug":"second-post","sort_description":"This is the second post","status":"visible"}]}

但問題是我無法在屏幕上顯示它們。 此外，我還在警報框中收到此警告

DataTables warning: table id=DataTables_Table_0 - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

這是我得到的截圖

我怎樣才能使它正常工作？ 任何幫助，將不勝感激

Answer 1

請試試這個

添加 Columns 參數以將數據與列關聯

代碼將是這樣的

$('.dataTable').DataTable({
   'bProcessing' : true,
   'bServerSide' : true,
   'sAjaxSource' : '<?php echo base_url($data_url); ?>',
   'sServerMethod' : 'POST',
   "columns": [
           { "data": "id" },
           { "data": "title" },
           { "data": "slug" },
           { "data": "date_published" },
           { "data": "status" }
        ]
   'fnServerData' : function (sSource, aoData, fnCallback) {
      $.ajax({
          dataType : 'json',
          type : 'post', 
          url : sSource,
          data : aoData,
          success : fnCallback,
     });
  }
});

有關詳細信息，請參閱數據表列

Answer 2

我有類似的問題。 這就是我解決它的方法：您必須將列設置為

"columns": [null, null, null, null, null,{}]

不是在 Ajax 中單獨設置的。