datatables是一个jquery的表格插件。

实例讲解

1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。

2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。
            编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。
            删除功能---单击datatables选中一行，单击ｄｅｌｅｔｅ按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击ｄｅｌｅｔｅ按钮，不会弹出警告框，也不会删除内容。
3、 编码：
Attributes//名称

 //声明jquery datatables         .....//datatables内容，此处省略   
      
        
Name        
        
value        
        
DisplayOrder       
     
   
   
 
 //添加按钮 //编辑按钮 //删除按钮   
//声明dialog,异步更新   @using (Ajax.BeginForm("ｕｐｄａｔｅ", "Product", new AjaxOptions {   UpdateTargetId = "d_Attributes",   OnSuccess = "dialogClose",   HttpMethod = "Post", }))   {     
       
         
                        
Name
           
            *
         
         
           
Value
           
             *
         
         
            
DisplayOrder
           
             *
         
         
           
                                     
         
       
     
   } 

上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，

<ｓｃｒｉｐｔ type="text/javascript">    function dialogClose() {      $("#e_Attributes").dialog("close");    }      $("#e_Attributes").dialog({      modal: true,      autoOpen: false,      show: {        effect: "blind",       duration: 1000      },      hide: {        effect: "explode",        duration: 1000     },     width: 400    });      var editor;      $(function () {     //声明datatable      $("#gridtable").dataTable().fnDestroy();      editor = $('#gridtable').dataTable({       "bInfo":false,       "bServerSide": false,       'bPaginate': false,           //是否分页。        "bProcessing": false,          //当datatable获取数据时候是否显示正在处理提示信息。        'bFilter': false,            //是否使用内置的过滤功能。        'bLengthChange': false,         //是否允许用户自定义每页显示条数。        'sPaginationType': 'full_numbers',   //分页样式      });     //单击，赋值，改样式     $("#gridtable tbody tr").click(function (e) {       if ($(this).hasClass('row_selected')) {         $(this).removeClass('row_selected');         putNullValue()       }       else {         editor.$('tr.row_selected').removeClass('row_selected');         $(this).addClass('row_selected');         var aData = editor.fnGetData(this);         if (null != aData) {           putValue(aData);         }       }     });     //双击     $("#gridtable tbody tr").dblclick(function () {       if ($(this).hasClass('row_selected')) {         //$(this).removeClass('row_selected');       }       else {         editor.$('tr.row_selected').removeClass('row_selected');         $(this).addClass('row_selected');       }        var aData = editor.fnGetData(this);       if (null != aData) {         putValue(aData);       }        $("#hiddenValue").val("edit");       $("#e_Attributes").dialog("open");      });     //添加     $("#add").click(function () {       editor.$('tr.row_selected').removeClass('row_selected');       putNullValue();        $("#hiddenValue").val("add");       $("#e_Attributes").dialog("open");     });     //编辑     $("#edit").click(function () {        var productAttributeID = $("#productAttributeID").val();       if (productAttributeID != "" && productAttributeID != null) {         $("#hiddenValue").val("edit");         $("#e_Attributes").dialog("open");       }      });     //删除     $("#ｄｅｌｅｔｅ").click(function () {       var productAttributeID = $("#productAttributeID").val();       var productID = $("#productID").val();       if (productAttributeID != null && productAttributeID != "") {         if (confirm("ｄｅｌｅｔｅ?")) {           $.ajax({             type: "GET",             url: "@Url.Action("DeleteAttribute", "Product")",             data: { ProductID: productID, ProductAttributeID: productAttributeID },//参数名要和Action 中的参数名相同             dataType: "html",             cache: false,             success: function (result) {               $("#d_Attributes").html(result);               $("#productAttributeID").val(null);             }           });         }       }     });      //赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了）     function putNullValue() {       。。。。。。／／此处省略     }     //赋值     function putValue(aData) {      。。。。。。//此处省略     }   });    $.ajaxSetup({ cache: false }); 

上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,ｄｅｌｅｔｅ的操作。

4、分页实现

引入CSS文件和JS文件

 <ｓｃｒｉｐｔ type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"> <ｓｃｒｉｐｔ type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js">    --------------------------------------------------------------------------   -----------最简单的方式：  $(document).ready(function() {  $("#example").dataTable(); });   ----------也可以自己定义各属性： <ｓｃｒｉｐｔ type="text/javascript" language="javascript">     $(document).ready(function() {       $("#example").dataTable({ //        "bPaginate": true, //开关，是否显示分页器 //        "bInfo": true, //开关，是否显示表格的一些信息 //        "bFilter": true, //开关，是否启用客户端过滤器 //        "sDom": "<>lfrtip<>", //        "bAutoWith": false, //        "bDeferRender": false, //        "bJQueryUI": false, //开关，是否启用JQueryUI风格 //        "bLengthChange": true, //开关，是否显示每页大小的下拉框 //        "bProcessing": true, //        "bScrollInfinite": false, //        "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px' //        "bSort": true, //开关，是否启用各列具有按列排序的功能 //        "bSortClasses": true, //        "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列 //        "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%' //        "aaSorting": [[0, "asc"]], //        "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列 //        "sDom": '<"H"if>t<"F"if>',         "bAutoWidth": false, //自适应宽度         "aaSorting": [[1, "asc"]],         "sPaginationType": "full_numbers",         "oLanguage": {           "sProcessing": "正在加载中......",           "sLengthMenu": "每页显示 _MENU_ 条记录",           "sZeroRecords": "对不起，查询不到相关数据！",           "semptyTable": "表中无数据存在！",           "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",           "sInfoFiltered": "数据表中共为 _MAX_ 条记录",           "sSearch": "搜索",           "oPaginate": {             "sFirst": "首页",             "sPrevious": "上一页",             "sNext": "下一页",             "sLast": "末页"           }         } //多语言配置         });     });   

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，

如果没有 thead 将会报错。

• bPaginate: 是否分页，默认为 true，分页

• iDisplayLength : 每页的行数，每页默认数量:10

• sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。

• bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。

• bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom

• bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。

最为简单的使用方式，就是零配置的方式。

/* * Example init */$(document).ready(function(){  $('#example').dataTable();});