如何在JQuery数据表中为行添加删除按钮 - How to add the delete button for row wise in JQuery Datatables

How to add the delete button for row wise in JQuery Datatables

我尝试在Jtable的每一行添加删除按钮。这里是我的jquery代码，

<script>
$(document).ready(function() {
$('#example').dataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "testing_ajax.php",
    "aoColumns": [
                  { "mData": "Customer Name" },
                  { "mData": "Feature Order No" },
                  { "mData": "NCP Account Number" },
                  { "mData": "Mcn Code" },
                  { "mData": "Sales Person" },
                  { "mData": "Zonee Id" },
                  { "mData": "MSR Id" },
                  {
                      "mData": null,
                      "sClass": "center",
                      "sDefaultContent": '<a href="">Edit</a> / <a href="">Delete</a>'
                  }
              ]
} );
} );
</script>

显示该表中的数据

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
           <th>Customer Name</th>
           <th>Feature Order No</th>
           <th>NCP Account Number</th>
           <th>Mcn Code</th>
           <th>Sales Person</th>
         <!--  <th>Due Date</th> --> 
           <th>Zonee Id</th>
            <th>MSR Id</th>
            <th>Action </th>
        </tr>
    </thead>
 </table>

用于获取数据的ajax调用:

$table = 'msr';
$primaryKey = 'msr_id';
$columns = array(
array( 'db' => 'cust_name', 'dt' => 0 ),
array( 'db' => 'order_no', 'dt' => 1 ),
array( 'db' => 'cust_no',  'dt' => 2 ),
array( 'db' => 'mcn_no',   'dt' => 3 ),
array( 'db' => 'sales_contact_name',     'dt' => 4 ),
array( 'db' => 'Zonee_id', 'dt' => 5),
array( 'db' => 'msr_id', 'dt' => 6),
 );
// SQL server connection information
$sql_details = array(
'user' => 'blrdev_rw',
'pass' => 'W.mZk8',
'db'   => 'afscp',
'host' => '135.75.60.120'
);
require( 'ssp.class.php' );
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
?>

你必须使用ColumnDefs

"columnDefs": [ 
              {   
                "aTargets":[7],  // this your column of action
                "mData": null, 
                "mRender": function(data, type, full){
                 return '<div id="container"><a href="javascript: void(0);" class="click_'+full[0]+'">Click</a></div>';   // replace this with button 
                }
              }
             ],

你应该调用一个函数来删除行:

jquery代码:

"sDefaultContent": '<a href="">Edit</a> / <a href="" onclick="removeRow();">Delete</a>'

然后额外的脚本代码:

function removeRow(event){
// target the table:
var oTable = $('#example').dataTable();
// this basically finds the 'id' of the row clicked & uses
// the function fnDeleteRow to remove it.
oTable.fnDeleteRow(oTable.fnGetPosition(row));
    }