Question

我正在使用DataTable服务器端进行第一次处理。

数据显示在表格中，但我想在dataTable中为每个单元格添加编辑/删除选项。

这是我的ajax调用和html表的客户端代码

<script>
        $(document).ready(function() {
        var dataTable = $('.table-wrap').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
        url: '<?php echo TEMPLATES_URI."schedule_ajax.php"; ?>',
        type: "post",
        error: function(){ 
        $(".employee-grid-error").html("");
        $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th               
        colspan="3">No data found in the server</th></tr></tbody>');
        $("#employee-grid_processing").css("display","none");   
        }
        }
        });             
        } );
     </script>
    <table class = "table-wrap">
        <thead>
            <tr id = "a">
                <th>Device</th>
                <th>City</th>
                <th>Schedule Date</th>
                <th>Business Point</th>
            </tr>
        </thead>
    </table>

这是服务器端代码

    <?php include("../inc/config.php");?>
    <?php
    $requestData= $_REQUEST;
    $columns = array( 
    // datatable column index  => database column name
    0 =>'name', 
    1 => 'BC_Name',
    2 => 'BS_ScheduledDate',
    3 => 'BP_Name',
    );
    $sql = "SELECT devices.name,
    et_business_cities.BC_Name, 
    et_business_schedules.BS_ScheduledDate,  
    et_business_point.BP_Name 
    FROM `et_business_schedules`
    INNER JOIN devices 
    ON et_business_schedules.BS_DeviceID = devices.id
    INNER JOIN et_business_cities 
    ON et_business_schedules.BS_CityID = et_business_cities.BC_ID
    INNER JOIN et_business_point 
    ON et_business_schedules.BS_BusinessPointID = et_business_point.BP_ID";
    $query=mysqli_query($db, $sql) 
    or die("schedule_ajax.php: get schedule    data");
    $totalData = mysqli_num_rows($query);
    $totalFiltered = $totalData;
    $sql = "SELECT devices.name,
            et_business_cities.BC_Name, 
            et_business_schedules.BS_ScheduledDate, 
            et_business_point.BP_Name 
    FROM `et_business_schedules`
            INNER JOIN devices ON et_business_schedules.BS_DeviceID = devices.id
            INNER JOIN et_business_cities 
    ON et_business_schedules.BS_CityID = et_business_cities.BC_ID
            INNER JOIN et_business_point 
    ON et_business_schedules.BS_BusinessPointID = et_business_point.BP_ID 
    WHERE   1=1";

   if( !empty($requestData['search']['value']) ) {   
       $sql.=" AND ( name 
       LIKE '".$requestData['search']['value']."%' ";    
       $sql.=" OR BC_Name 
       LIKE '".$requestData['search']['value']."%' ";
       $sql.=" OR BS_ScheduledDate 
       LIKE '".$requestData['search']['value']."%'";
       $sql.=" OR BC_Name 
       LIKE '".$requestData['search']['value']."%' ";
       $sql.=" OR BP_Name 
       LIKE '".$requestData['search']['value']."%' )";
       }    
       $query=mysqli_query($db, $sql) 
       or die("employee-grid-data.php: get schedule   data");
       $totalFiltered = mysqli_num_rows($query); 
       $sql.=" LIMIT ".$requestData['start']." ,".$requestData['length']."   ";
       $query=mysqli_query($db, $sql) 
       or die("schedule_ajax.php: get schedule data");
       $data = array();
    while( $row=mysqli_fetch_array($query) ) { 
       $dt = new DateTime($row['BS_ScheduledDate']);
       $newdate =  $dt->format('d-m-Y');
       $nestedData=array(); 
       $nestedData[] = $row["name"];
       $nestedData[] = $row["BC_Name"];
       $nestedData[] = $newdate;
       $nestedData[] = $row["BP_Name"];
       $data[] = $nestedData;
       }

       $json_data = array(
            "draw" => intval( $requestData['draw'] ),   
            "recordsTotal" => intval( $totalData ),  
            "recordsFiltered" => intval( $totalFiltered ), 
            "data" => $data   
       );
      echo json_encode($json_data);     
      ?>

Answer 1

您可以使用rowCallback

根据文件：

此回调允许您在为每个表格绘制生成每个行之后发布流程＆＃39; ，但在将其渲染到文档之前。这意味着行的内容可能没有维度（例如$().width(），如果它不在文档中。

相同的代码将是：

var dataTable = $('.table-wrap').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
            url: '<?php echo TEMPLATES_URI."schedule_ajax.php"; ?>',
            type: "post",
            error: function(){ 
                 $(".employee-grid-error").html("");
                 $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                 $("#employee-grid_processing").css("display","none");   
             }
        },
        "rowCallback": function(row, data, index){
                var newBtns = "<button>Edit</button>&nbsp;<button>Delete</button>";
                $(row).append(newBtns);
            }
     });

这里是fiddle

Answer 2

我将查询更改为

"SELECT 
devices.name,
et_business_cities.BC_Name, 
et_business_schedules.BS_ID,
et_business_schedules.BS_ScheduledDate, 
et_business_point.BP_Name 

FROM `et_business_schedules`
INNER JOIN devices ON et_business_schedules.BS_DeviceID = devices.id
INNER JOIN et_business_cities ON et_business_schedules.BS_CityID = et_business_cities.BC_ID
INNER JOIN et_business_point ON et_business_schedules.BS_BusinessPointID = et_business_point.BP_ID WHERE 1=1";

获取行的ID并将其重定向到我可以轻松编辑并查看的任何其他页面。

 while( $row=mysqli_fetch_array($query) ) { 
    $nestedData=array(); 
    $nestedData[] = $row["name"];
    $nestedData[] = $row["BC_Name"];
    $nestedData[] = $row["BS_ScheduledDate"];
    $nestedData[] = $row["BP_Name"];
    $nestedData[] ='<a class="fa fa-pencil-square-o" href="'.TEMPLATES_URI.$row['BS_ID'].'" >Edit</a>
                          <a class="fa fa-trash" href="'.TEMPLATES_URI.$row['BS_ID'].'" >Delete</a>
                          <a class="fa fa-eye" href="'.TEMPLATES_URI.$row['BS_ID'].'" >View</a>';
        $data[] = $nestedData;
    }

如何在服务器端处理jquery时编辑单元格并从dataTable中删除一行

2 个答案: