Ignited Datatables - 在屏幕上显示记录

时间:2015-09-23 08:25:35

标签: php jquery codeigniter datatable

我使用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

这是我得到的截图 enter image description here

我该如何正常工作?任何帮助将不胜感激

2 个答案:

答案 0 :(得分:1)

请试试这个

  

添加列参数以将数据与列

相关联

代码将是这样的

$('.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

答案 1 :(得分:0)

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

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

单独设置,而不是在Ajax中。