Codeigniter - 如何从ajax获取datatable数据？ [英] Codeigniter - How to fetch datatable data from ajax?
本文介绍了Codeigniter - 如何从ajax获取datatable数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
控制器：
public function index（）{
$ data = array（
'record'=> $ this-> Parameter_model-> get_parameter（'tbl_parameter'）
）;
$ this-> site->视图（'parameter'，$ data）;
}
模型：
public function get_parameter（$ table）{
$ query = $ this-> db-> query（select * from $ table order parameter_IDASC）;
if（$ query-> num_rows（）> 0）{
foreach（$ query-> result_array（）as $ row）{
$ data [] = $ row;
}
$ query-> free_result（）;
}
else {
$ data = NULL;
}
return $ data;
}
查看：
< table id =parameterclass =listdata table table-bordered table-striped table-hover>
< thead>
< tr>
< th class =text-nowrap>参数< / th>
< th class =text-nowrap>方法< / th>
< th class =text-nowrap> Type< / th>
< th class =text-nowrap> Action< / th>
< / tr>
< / thead>
< tbody>
<？php if（！empty（$ record））：？>
<？php foreach（$ record as $ row）：？>
< tr align =center>
< td class =text-nowrap>< a href =<？= set_url（'parameter / parameter_view /'.$ row ['parameter_ID']）;？>> < strong><？php echo $ row ['parameter_name'];？>< / strong>< / a>< / td>
< td class =text-nowrap><？php echo $ row ['parameter_method'];？>< / td>
< td class =text-nowrap>
<？php
if（$ row ['parameter_type'] ==1）{
echoGeneral;
}
else {
echoCOA Only;
}
？>
< / td>
< td class =text-nowrap>
< div>
< a href =<？= set_url（'parameter＃edit？parameter_ID ='。$ row ['parameter_ID']）;？> class =btn btn-warning btn-xs>编辑< / a>
< a href =<？= set_url（'parameter / parameter_view /'.$ row ['parameter_ID']）;？> class =btn btn-success btn-xs> Lihat< / a>
< a href =<？= set_url（'parameter＃hapus？parameter_ID ='。$ row ['parameter_ID']）;？> class =btn btn-danger btn-xs> Hapus< / a>
< / div>
< / td>
< / tr>
<？php endforeach;？>
<？php endif;？>
< / tbody>
< tfoot>
< tr>
< th class =text-nowrap>参数< / th>
< th class =text-nowrap>方法< / th>
< th class =text-nowrap> Type< / th>
< th class =text-nowrap> Action< / th>
< / tr>
< / tfoot>
< / table>
Javascript ：
//参数
//设置 - 向每个页脚单元格添加文本输入
$（'＃parameter tfoot th'）。each（function（） {
var title = $（this）.text（）;
$（this）.html（'< input type =textstyle =width：100％;title = '+ title +'占位符=搜索'+标题+'/>'）;
}）;
// DataTable
var table = $（'＃parameter'）。DataTable（{
paging：true，
searching：true，
ordering ：true，
order：[[0，asc]]，
scrollX：true，
scroller：true，
}）;
//应用搜索
table.columns（）。every（function（）{
var that = this;
$（'input '，this.footer（））.on（'keyup change'，function（）{
if（that.search（）！== this.value）{
that
.search （this.value）
.draw（）;
}
}）;
}）;
以上代码工作良好。
，我想通过ajax请求将数据提取到表id =parameter中。我已经从url创建了一个ajax请求，可以从这里说出 http：//'+ host + path +'/ action / ambil ，其中 var path = window.location.pathname; 和 var host = window.location.hostname; 。
ajax响应产生：
{record：[{parameter_ID：1，parameter_name pH，parameter_method：（pH计），parameter_type：1，{parameter_ID：2，parameter_name：Viscosity，parameter_method粘度计），parameter_type：1}}}
问题
如何使用Ajax数据源配置datatable，以及如何将数据显示到表中，以便我可以使用数据来创建一个像代码这样的链接
< a href =<？= set_url（'parameter / parameter_view /'.$ row ['parameter_ID']）;？>>
解决方案
你可以通过服务器端脚本如下。
- 更改您的控制器，以便它将处理服务器端从datatable调用，您只能在控制器中创建动态链接。
- 更改您的脚本以使用ajax调用。
- 不加载任何东西在视图tbody加载页面。
- 注意：我已经跳过了我直接查询的模型部分。希望你可以改变它。
Contorller
public function index（）{
$ data = array（）;
if（$ this-> input-> is_ajax_request（））{
/ **这将处理datatable js ajax调用* * /
/ **获取所有的datatable参数* * /
$ search = $ this-> input-> get（'search'）; / ** datatable * * /
$ offset = $ this-> input->的搜索值get（'start'）; / ** offset value * * /
$ limit = $ this-> input-> get（'length'）; / **对datatable（显示条目）的限制* /
$ order = $ this-> input-> get（'order'）; / ** order by（column sorted）* * /
$ column = array（'parameter'方法'，'type'）; / **在这里设置你的数据库列名，以进行排序* * /
$ orderColumn = isset（$ order [0] ['column']）？ $ column [$ order [0] ['column']]：'parameter';
$ orderDirection = isset（$ order [0] ['dir']）？ $ order [0] ['dir']：'asc';
$ ordrBy = $ orderColumn。 。 $ orderDirection;
if（isset（$ search ['value']）&&！empty（$ search ['value']））{
/ **创建sql或调用Model * * /
/ ** $ this-> load-> model（'Parameter_model'）;
$ this-> Parameter_model-> get_parameter（'tbl_parameter'）; * * /
/ **我正在调用sql直接在控制器中为您的答案
*请根据您的表名更改您的sql
* * /
$ sql =SELECT * FROM TABLE_NAME WHERE column_name'％like％'。 $ search ['value']。 按顺序。 $ ordrBy。 limit $ offset，$ limit;
$ sql =SELECT count（*）FROM TABLE_NAME WHERE column_name'％like％'。 $ search ['value']。 按顺序。 $ ordrBy;
$ result = $ this-> db-> query（$ sql）;
$ result2 = $ this-> db-> query（$ sql2）;
$ count = $ result2-> num_rows（）;
} else {
/ **
*如果在datatable
* /
$ sql =SELECT * FROM TABLE_NAME order by中没有seach值。 $ ordrBy。 limit $ offset，$ limit;
$ sql2 =SELECT * FROM TABLE_NAME order by。 $ ordrBy
$ result = $ this-> db-> query（$ sql）;
$ result2 = $ this-> db-> query（$ sql2）;
$ count = $ result2-> num_rows（）;
}
/ **根据需要创建要在dataTable中显示的数据** /
$ data = array（）;
if（！empty（$ result-> result（）））{
foreach（$ result-> result（）as $ k => $ v）{
$ data [] = array（
/ **你可以在这里添加任何锚链接或动态数据** /
'parameter'=>< a href =。set_url（'parameter / parameter_view /'.$v['parameter_ID']).\"><strong>\".$v['parameter_name'].\"</strong></a>，
'method'= < a href =。set_url（'parameter / parameter_view /'.$ v ['parameter_ID']）。>< strong>$ v ['parameter_name']。< / strong& ;< / a>，
'parameter_type'=>< a href =。set_url（'parameter / parameter_view /'.$ v ['parameter_ID']）。>< strong& ;$ v ['parameter_name']。< / strong>< / a>，
'actions'=>< a href =。set_url（'parameter / parameter_view / 。$ v ['parameter_ ID']）。>< strong>$ v ['parameter_name']。< / strong>< / a>
）;
}
}
/ **
* draw，recordTotal，recordsFiltered是分页和信息所必需的。
* /
$ results = array（
draw=> $ this-> input-> get（'draw'），
recordsTotal=> ; count（$ data），
recordsFiltered=> $ count，
data=> $ data
）;
echo json_encode（$ results）;
} else {
/ **这将默认加载，没有datatable
*的数据，我们将通过datatable ajax调用
* /
$加载表中的数据this-> site-> view（'parameter'，$ data）;
}
}
查看
< table id =parameterclass =listdata table table-bordered table-striped table-hover>
< thead>
< tr>
< th class =text-nowrap>参数< / th>
< th class =text-nowrap>方法< / th>
< th class =text-nowrap> Type< / th>
< th class =text-nowrap> Action< / th>
< / tr>
< / thead>
< tbody>默认情况下，
/ ** tbody将为空。 ** /
< / tbody>
< tfoot>
< tr>
< th class =text-nowrap>参数< / th>
< th class =text-nowrap>方法< / th>
< th class =text-nowrap> Type< / th>
< th class =text-nowrap> Action< / th>
< / tr>
< / tfoot>
< / table>
脚本
< script>
$（document）.ready（function（）{
$（'＃example'）。DataTable（{
url：'<？php base_url（）;？> controllerName /索引'，
处理：true，
serverSide：true，
分页：true，
搜索：true，
排序：true，
order： [0，asc]]，
scrollX：true，
scroller：true，
列：[{data：parameter}，{data：method}，{data ：parameter_type}，{data：action}]
/ **这将创建具有以上列数据的数据** /
}）;
}）;
< / script>
如果您希望使用一些第三方库检查这个。
对于您的模型查询，您可以在这篇文章。
I'm working an application based on CodeIgniter. Here the code:
Controller:
public function index(){
$data = array(
'record' => $this->Parameter_model->get_parameter('tbl_parameter')
);
$this->site->view('parameter', $data);
}
Model:
public function get_parameter($table){
$query = $this->db->query("select * from $table order by 'parameter_ID' ASC");
if($query->num_rows() > 0){
foreach($query->result_array() as $row){
$data[] = $row;
}
$query->free_result();
}
else{
$data = NULL;
}
return $data;
}
View:
<table id="parameter" class="listdata table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="text-nowrap">Parameter</th>
<th class="text-nowrap">Method</th>
<th class="text-nowrap">Type</th>
<th class="text-nowrap">Action</th>
</tr>
</thead>
<tbody>
<?php if(!empty($record)):?>
<?php foreach($record as $row):?>
<tr align="center">
<td class="text-nowrap"><a href="<?=set_url('parameter/parameter_view/'.$row['parameter_ID']);?>"><strong><?php echo $row['parameter_name'];?></strong></a></td>
<td class="text-nowrap"><?php echo $row['parameter_method'];?></td>
<td class="text-nowrap">
<?php
if($row['parameter_type'] == "1"){
echo "General";
}
else{
echo "COA Only";
}
?>
</td>
<td class="text-nowrap">
<div>
<a href="<?=set_url('parameter#edit?parameter_ID='.$row['parameter_ID']);?>" class="btn btn-warning btn-xs">Edit</a>
<a href="<?=set_url('parameter/parameter_view/'.$row['parameter_ID']);?>" class="btn btn-success btn-xs">Lihat</a>
<a href="<?=set_url('parameter#hapus?parameter_ID='.$row['parameter_ID']);?>" class="btn btn-danger btn-xs">Hapus</a>
</div>
</td>
</tr>
<?php endforeach;?>
<?php endif;?>
</tbody>
<tfoot>
<tr>
<th class="text-nowrap">Parameter</th>
<th class="text-nowrap">Method</th>
<th class="text-nowrap">Type</th>
<th class="text-nowrap">Action</th>
</tr>
</tfoot>
</table>
Javascript:
// parameter
// Setup - add a text input to each footer cell
$('#parameter tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" style="width:100%;" title="Search '+title+'" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#parameter').DataTable({
paging: true,
searching: true,
ordering: true,
"order": [[ 0, "asc" ]],
scrollX: true,
scroller: true,
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
Above code work well.
Now, I want to fetch data into the table id="parameter" via ajax request. I've create an ajax request from url, lets say from here http://'+host+path+'/action/ambil, where var path = window.location.pathname; and var host = window.location.hostname;.
The ajax response produce:
{"record":[{"parameter_ID":"1","parameter_name":"pH","parameter_method":"(pH meter)","parameter_type":"1",{"parameter_ID":"2","parameter_name":"Viscosity","parameter_method":"(Brookfield-Viscometer)","parameter_type":"1"}]}
Question
How to configure datatable with Ajax data source, and how to display the data into the table, so I can use the data for example to create a link like code
<a href="<?=set_url('parameter/parameter_view/'.$row['parameter_ID']);?>">
解决方案
You can do dataTable by server side script as follow.
- Change your controller so that It will handle the server side call from datatable and you can create dynamic links in controller only. I have added comment in controller for more details.
- Change your script to call it with ajax.
- Don't load any thing in view tbody while loading page.
- Note : I have skipped the model part I used direct query. Hope you can change it.
Contorller
public function index() {
$data = array();
if ($this->input->is_ajax_request()) {
/** this will handle datatable js ajax call * */
/** get all datatable parameters * */
$search = $this->input->get('search');/** search value for datatable * */
$offset = $this->input->get('start');/** offset value * */
$limit = $this->input->get('length');/** limits for datatable (show entries) * */
$order = $this->input->get('order');/** order by (column sorted ) * */
$column = array('parameter', 'method', 'type');/** set your data base column name here for sorting* */
$orderColumn = isset($order[0]['column']) ? $column[$order[0]['column']] : 'parameter';
$orderDirection = isset($order[0]['dir']) ? $order[0]['dir'] : 'asc';
$ordrBy = $orderColumn . " " . $orderDirection;
if (isset($search['value']) && !empty($search['value'])) {
/** creat sql or call Model * */
/** $this->load->model('Parameter_model');
$this->Parameter_model->get_parameter('tbl_parameter'); * */
/** I am calling sql directly in controller for your answer
* Please change your sql according to your table name
* */
$sql = "SELECT * FROM TABLE_NAME WHERE column_name '%like%'" . $search['value'] . " order by " . $ordrBy . " limit $offset,$limit";
$sql = "SELECT count(*) FROM TABLE_NAME WHERE column_name '%like%'" . $search['value'] . " order by " . $ordrBy;
$result = $this->db->query($sql);
$result2 = $this->db->query($sql2);
$count = $result2->num_rows();
} else {
/**
* If no seach value avaible in datatable
*/
$sql = "SELECT * FROM TABLE_NAME order by " . $ordrBy . " limit $offset,$limit";
$sql2 = "SELECT * FROM TABLE_NAME order by " . $ordrBy;
$result = $this->db->query($sql);
$result2 = $this->db->query($sql2);
$count = $result2->num_rows();
}
/** create data to display in dataTable as you want **/
$data = array();
if (!empty($result->result())) {
foreach ($result->result() as $k => $v) {
$data[] = array(
/** you can add what ever anchor link or dynamic data here **/
'parameter' => "<a href=".set_url('parameter/parameter_view/'.$v['parameter_ID'])."><strong>".$v['parameter_name']."</strong></a>",
'method' => "<a href=".set_url('parameter/parameter_view/'.$v['parameter_ID'])."><strong>".$v['parameter_name']."</strong></a>",
'parameter_type' => "<a href=".set_url('parameter/parameter_view/'.$v['parameter_ID'])."><strong>".$v['parameter_name']."</strong></a>",
'actions' => "<a href=".set_url('parameter/parameter_view/'.$v['parameter_ID'])."><strong>".$v['parameter_name']."</strong></a>"
);
}
}
/**
* draw,recordTotal,recordsFiltered is required for pagination and info.
*/
$results = array(
"draw" => $this->input->get('draw'),
"recordsTotal" => count($data),
"recordsFiltered" => $count,
"data" => $data
);
echo json_encode($results);
} else {
/** this will load by default with no data for datatable
* we will load data in table through datatable ajax call
*/
$this->site->view('parameter', $data);
}
}
View
<table id="parameter" class="listdata table table-bordered table-striped table-hover">
<thead>
<tr>
<th class="text-nowrap">Parameter</th>
<th class="text-nowrap">Method</th>
<th class="text-nowrap">Type</th>
<th class="text-nowrap">Action</th>
</tr>
</thead>
<tbody>
/** tbody will be empty by default. **/
</tbody>
<tfoot>
<tr>
<th class="text-nowrap">Parameter</th>
<th class="text-nowrap">Method</th>
<th class="text-nowrap">Type</th>
<th class="text-nowrap">Action</th>
</tr>
</tfoot>
</table>
Script
<script>
$(document).ready(function() {
$('#example').DataTable({
url: '<?php base_url(); ?>controllerName/index',
processing: true,
serverSide: true,
paging: true,
searching: true,
ordering: true,
order: [[0, "asc"]],
scrollX: true,
scroller: true,
columns: [{data: "parameter"}, {data: "method"}, {data: "parameter_type"}, {data: "action"}]
/** this will create datatable with above column data **/
});
});
</script>
If you wish to use some third party library check this. For your model query you can customize it as mention in this post.
这篇关于Codeigniter - 如何从ajax获取datatable数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
