我正在基于CodeIgniter的应用程序。这里的代码:
控制器 :
public function index(){ $data = array( 'record' => $this->Parameter_model->get_parameter('tbl_parameter') ); $this->site->view('parameter', $data); }
型号 :
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; }
查看 :
<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(); } } ); } );
上面的代码运行良好。
现在,我想table id="parameter"通过ajax请求将数据提取到。我已经从url创建了一个ajax请求,可以从这里http://'+host+path+'/action/ambil,where var path = window.location.pathname;和进行说var host = window.location.hostname;。
table id="parameter"
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 meter)","parameter_type":"1",{"parameter_ID":"2","parameter_name":"Viscosity","parameter_method":"(Brookfield-Viscometer)","parameter_type":"1"}]}
问题 如何使用Ajax数据源配置数据表,以及如何将数据显示到表中,所以我可以使用数据例如创建类似代码的链接 <a href="<?=set_url('parameter/parameter_view/'.$row['parameter_ID']);?>">
<a href="<?=set_url('parameter/parameter_view/'.$row['parameter_ID']);?>">
您可以按以下方式通过服务器端脚本执行dataTable 。
控制器
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); } }
视图
<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> $(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>
如果您想使用某些第三方库,请选中此选项。为了您的型号查询,你可以自定义在提这个职位。