Ignited Datatables - 在屏幕上显示记录
Ignited Datatables - display records on screen
我正在使用 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
这是我得到的截图
我怎样才能让它正常工作?任何帮助将不胜感激
请试试这个
Add Columns parameter to associate data with column
代码将是这样的
$('.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
我有类似的问题。这就是我解决它的方法:
您必须将列设置为
"columns": [null, null, null, null, null,{}]
不在Ajax中单独设置。
我正在使用 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
这是我得到的截图
我怎样才能让它正常工作?任何帮助将不胜感激
请试试这个
Add Columns parameter to associate data with column
代码将是这样的
$('.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
我有类似的问题。这就是我解决它的方法: 您必须将列设置为
"columns": [null, null, null, null, null,{}]
不在Ajax中单独设置。