如何在JQuery数据表中按行添加删除按钮

Question

我已经尝试在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 )
);
?>

Answer 1

您必须使用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 
                }
              }
             ],

Answer 2

您应该调用函数以删除行：

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

    }