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事件一起使用，用来更新数据。

以上的方法仅仅是页面级别的操作，没有和数据库交互，如果要和数据库交互，我们可以摒弃上面的方法，使用异步更新页面数据。