JQuery DataTables Editor---只修改頁面內容

1. 近來在工作中需要對JQuery DataTables進行增，刪，改的操作，在網上找了一些資料，感覺比較的好的就是（http://editor.datatables.net/）文章中所展示的操作方法（如下圖所示），但是這個dome所展示的功能需要付費，最后還是放棄用他的方法。

           但是還是需要這樣的功能，所以只能自己寫這樣的功能。

       2.對datatables的操作一共分為三個功能：增加一行數據，編輯選中行的數據以及刪除選中行的數據。

          對於上面提到的三個功能，操作不光要更改頁面上的內容，還需要更改數據庫的內容。

       3.只改變頁面值的做法：

•   首先聲明datatables

          引用jquery-ui.min.js

$(document).ready(function() {
  $('#example').dataTable();
} );
 

• datatables添加一行數據的方法

function fnClickAddRow() {
  $('#example').dataTable().fnAddData( [
    val[0],
    val[1], 
    val[2],
    val[3]
  );
}

上面的代碼一共在datatables 中添加了4個數據，需要添加數據時，只需要修改val的值即可。

• datatables刪除一行的方法

$(document).ready(function() {
  var oTable = $('#example').dataTable();
   
  // Immediately remove the first row
  oTable.fnDeleteRow( 0 );
} );

上面的代碼中是刪除一行數據的方法，需要給fnDeleteRow()方法，傳入需要刪除的行標。

獲取選中行以及數據：

 $("#gridtable tbody tr").click(function (e) {//得到選中行

           var aData = editor.fnGetData(this);//得到選中行的數據

           if ($(this).hasClass('row_selected')) {
                  $(this).removeClass('row_selected');}
           else {
                  editor.$('tr.row_selected').removeClass('row_selected');
                  $(this).addClass('row_selected');}

           if (null != aData) {
                  //可得到選中值
            }
   });

 

aData就是我們得到的選中行的值。var aPos = oTable.fnGetPosition( this )---得到行標。

• 編輯一行數據

$(document).ready(function() {
  var oTable = $('#example').dataTable();
  oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell
  oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1 ); // Row
} );

上面代碼可以和click事件一起使用，用來更新數據。

以上的方法僅僅是頁面級別的操作，沒有和數據庫交互，如果要和數據庫交互，我們可以摒棄上面的方法，使用異步更新頁面數據。