JQuery Datatables

 1      $(document).on(‘click‘, ‘th input:checkbox‘, function() {
 2         var that = this;
 3         $(this).closest(‘table‘).find(‘tr > td:first-child input:checkbox‘)
 4             .each(function() {
 5                 this.checked = that.checked;
 6                 $(this).closest(‘tr‘).toggleClass(‘selected‘);
 7             });
 8     });
 9     
10     //对行单击添加监听事件
11     $(‘#example tbody‘).on(‘click‘, ‘tr‘, function () {
12         var tr = $(this).closest(‘tr‘);
13         var checkbox = tr.find(‘td:first-child input:checkbox‘)[0];
14         checkbox.checked = !checkbox.checked;
15 
16     });

 1 <div class="modal fade" id="newPopUp">
 2     <div class="modal-dialog">
 3         <div class="modal-content">
 4             <div class="modal-header">
 5                 <button type="button" class="close" data-dismiss="modal" aria-hidden="True">&times;</button>
 6                 <h4 class="modal-title" id="newCustomerLabel">新增客户</h4>
 7             </div>
 8             <div class="modal-body">
 9                 <form class="form-horizontal" role="form" id="customerForm">
10                     <div class="form-group">
11                         <label for="inputName" class="col-sm-2 control-label">客户名称</label>
12                         <div class="col-sm-10">
13                             <input type="text" class="form-control" id="inputName" placeholder="客户名称"/>
14                         </div>
15                     </div>
16                     ...
17                 </form>
18             </div>
19             <div class="modal-footer">
20                 <button type="button" class="btn btn-success" onclick=" saveItem() ">保存</button>
21                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
22             </div>
23         </div>
24     </div>
25 </div>

    //对行双击添加监听事件
    $(‘#example tbody‘).on(‘dblclick‘, ‘tr‘, function () {
        var tr = $(this).closest(‘tr‘);
        var id = tr.find(‘td:first-child input:checkbox‘).val();//获取Checkbox的值
        editItem(id);
    });
    //编辑
    function editItem(id) {
        //更改模态窗口名称
        var modal = $(‘#newPopUp‘);
        modal.find(‘#newCustomerLabel‘).text("编辑");
        $.ajax({
            url: "/XXX/XXX/GetItem",
            type: "GET",
            data: { "Id": id },
            success: function (result) {
               //赋值
                $(‘#inputName‘).val(result.Name);
                ....
            }
        });
    }    

 1     //保存
 2     function saveItem() {
 3         var name = $(‘#inputName‘).val();
 4         ...
 5 
 6         $.ajax({
 7             url: "/XXX/XXX/Post",
 8             type: "POST",
 9             data: { "Name": name....},
10             success: function() {
11                 $(‘#newPopUp‘).modal(‘hide‘);
12                 reloadList();
13             }
14         });
15     }

 1     //删除操作
 2     function deleteItem() {
 3         //在此用了BootStrap的一个插件，BootStrap.Message,并中文化
 4         $.messager.model = {
 5             ok: { text: "确认", classed: ‘btn-info‘ },
 6             cancel: { text: "取消", classed: ‘btn-danger‘ }
 7         };
 8         //获取所有勾选ID
 9         var ids="";
10         $(‘#example‘).find(‘tr > td:first-child input:checkbox‘)
11             .each(function () {
12                 if (this.checked) {
13                     ids+=$(this).val()+",";  
14                 }
15             });
16         //如果没有勾选，提示
17         if (ids === "") {
18             $.messager.alert("请选择一行数据！");
19             return;
20         } else {
21             ids = ids.substr(0, ids.length - 1);
22         }
23 
24         $.messager.confirm("删除", "确认要删除吗？", function () {
25             $.ajax({
26                 url: "/XXX/XXX/Delete",
27                 type: "Delete",
28                 data: { "ids": ids },
29                 success: function () {
30                     reloadList();//重新加载
31                 }
32             });
33         });
34     }

    //刷新
    function reloadList() {
        var tables = $(‘#example‘).dataTable().api();//获取DataTables的Api，详见 http://www.datatables.net/reference/api/
        tables.ajax.reload();
    }