为数据网格表

时间:2016-06-13 01:54:09

标签: php jquery ajax datatables

我有一个填充数据网格表的脚本。我想为每个显示的行创建一个超链接。

超链接应该看起来像<a href"index.php?id=(id of the row)">

如何使用我当前的脚本执行此操作。

这是我的剧本:

<?php
 // initilize all variable
 $params = $columns = $totalRecords = $data = array();
 $params = $_REQUEST;

 //define index of column
 $columns = array( 
  0 => 'id',
  1 => 'name',
 );
 $where = $sqlTot = $sqlRec = "";

 // check search value exist
 if( !empty($params['search']['value']) ) {   
  $where .=" WHERE ";
  $where .=" name LIKE '".$params['search']['value']."%'";
 }

 // getting total number records without any search
 $sql = "SELECT id, name FROM `customers`";
 $sqlTot .= $sql;
 $sqlRec .= $sql;

 //concatenate search sql if value exist
 if(isset($where) && $where != '') {
  $sqlTot .= $where;
  $sqlRec .= $where;
 }

 $sqlRec .=  " ORDER BY ". $columns[$params['order'][0]['column']]."   ".$params['order'][0]['dir']."  LIMIT ".$params['start']." ,".$params['length']." ";
 $queryTot = mysqli_query($conn, $sqlTot) or die("database error:". mysqli_error($conn));
 $totalRecords = mysqli_num_rows($queryTot);
 $queryRecords = mysqli_query($conn, $sqlRec) or die("error to fetch customers data");

 //iterate on results row and create new index array of data
 while( $row = mysqli_fetch_row($queryRecords) ) { 
  $data[] = $row;
 }  

 $json_data = array(
 "draw"            => intval( $params['draw'] ),   
 "recordsTotal"    => intval( $totalRecords ),  
 "recordsFiltered" => intval($totalRecords),
 "data"            => $data   // total data array
 );

 echo json_encode($json_data);  // send data as json format
?>

修改1:

我在这里显示数据:

<table id="employee_grid" class="display" width="100%" cellspacing="0">
 <thead>
  <tr>
   <th>ID</th>
   <th>Name</th>
  </tr>
 </thead>
</table>

<script type="text/javascript">
 $( document ).ready(function() {
  $('#employee_grid').DataTable({
   "bProcessing": true,
   "serverSide": true,
   "ajax":{
    url :"get.php", // json datasource
    type: "post",  // type of method  ,GET/POST/DELETE
    error: function(){
     $("#employee_grid_processing").css("display","none");
    }
   }
  });   
 });
</script>   

2 个答案:

答案 0 :(得分:1)

我通过更改JavaScript修复了它。

<script type="text/javascript">
 $( document ).ready(function() {
  $('#employee_grid').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "post1.php",
            "type": "POST",
            "error": function(){
                $("#employee_grid_processing").css("display","none");
            }
        },
       "columnDefs": [ {
       "targets": 0,
       "render": function ( data, type, full, meta ) {
                return  '<a href="http://www.example.com/'+data+'">Link</a>';
                }
            }
        ]              
  });   
 });
</script>

此代码将使用文本Link替换第一列,并且将在超链接中使用第一列的原始结果。

答案 1 :(得分:0)

我认为您必须编写自定义mRender才能获得此链接。并添加一个额外的 表格标题上显示<th>Link</th>

 $( document ).ready(function() {
  $('#employee_grid').DataTable({
   "bprocessing": true,
   "serverSide": true,
        "ajax": {
            "url": "get.php",
            "type": "POST",
            "error": function(){
                $("#employee_grid_processing").css("display","none");
            }
        },
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "id", "render": function ( data )  {
                return  '<a href="http://domain.com/'+data+'">Link</a>';
                }
            }
        ]              
  });   
 });

PS 请从您的代码中删除我的旧建议。