点燃的数据表 - 在屏幕上显示记录

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

详情请参考datatables column

Answer 2

我有类似的问题。这就是我解决它的方法： 您必须将列设置为这样

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

不在Ajax中单独设置。