如何在服務器端處理jquery中編輯單元格並從dataTable中刪除行

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

根據文檔：

通過此回調，您可以在為每個表格繪制生成行之后，但在將其呈現到文檔之前， 對每個行進行“后處理” 。 這意味着如果該行的內容尚未在文檔中，則它可能沒有尺寸（例如$().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);
            }
     });

這是一個小提琴

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";

並獲取row的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;
    }