bootstrap

table：

<table id="table_local" class="table table-bordered" style="cursor: pointer;"
                cellspacing="0" width="100%">
                <!-- <caption>学生违纪信息</caption> -->
                <thead id="tem" ondblclick="getDetails(this)">
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>考试科目</th>
                        <th>考场</th>
                        <th>班级</th>
                        <th>监考人员</th>
                        <th>原因</th>
                        <th>id</th>
                        <th>选择</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

table 加载：

table = $('#table_local').DataTable(
        {
            // 通过ajax向后台controller请求数据
            ajax : {
                url : "queryStudentDisciplineByPage",
                dataSrc : "data",
                data : function(d) {
                    var searchStringD = $('#searchString').val();
                    // 添加额外的参数传给服务器
                    d.extra_search = searchStringD;
                }
            },
            // 绑定列数据，名字和json串里的key相同，只有这里绑定了表格中才会显示数据
            columns : [
                     
                    {
                        data : 'studentId'
                    },
                    {
                        data : 'studentName'
                    },
                    {
                        data : function(
                                source,
                                type, val) {
                        /*    var examinationId = source.examinationId;
                            var examinationName = getExamination(examinationId);
                            return examinationName;*/
                            
                            var examRooms = source.examRoomId;
                            var examinationName = cutAnswer(examRooms)[1].toString();
                            return examinationName;
                            
                        }
                    },
                    
                    {
                        data : 'examRoomId'
                    }, {
                        data : 'className'
                    },
                    {
                        data : function(source) {
                            var teacherId = source.teacherId;
                            var teacherName = "";
                            teacherName = getTeacherName(teacherId);
                            return teacherName;
                        }
                    },
                    
                    {
                        data : 'reason',
                        visible: false
                    },
                     {
                          data:'id',
                          visible: false
                      },
                      {
                          data:function(source)
                          {
                              var id = "'"+source.id+"'";
                              var html = '<div align="center"><input type="checkbox" name="box" value="' +id +'"></div>';
                              return html;
                          }
                         
                      }
                      
                    ],
            // processing : true, //打开数据加载时的等待效果
            serverSide : true,// 打开后台分页
            ordering : false,// 是否启用排序
            searching : false,// 是否 启用模糊搜索
            // 当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
            deferRender : true,
            // 国际化设置（设置中文显示）
            language : {
                
                search : '<span class="label label-success">搜索：</span>',// 右上角的搜索文本，可以写html标签
                lengthMenu : '<div style="float:left;height:33px;line-height:33px;overflow:hidden;text-align:center" >每页条数：</div><div style="float:left"><select class="form-control input-xsmall" style="float:right">'
                    + '<option value="1">1</option>'
                    + '<option value="5">5</option>'
                    + '<option value="10">10</option>'
                    + '<option value="20">20</option>'
                    + '<option value="30">30</option>'
                    + '<option value="40">40</option>'
                    + '<option value="50">50</option>'
                    + '</select></div>',// 左上角的分页大小显示。

                paginate : {// 分页的样式内容。
                    previous : "上一页",
                    next : "下一页",
                    first : "第一页",
                    last : "最后"
                },

                zeroRecords : "没有内容",// table
                // tbody内容为空时，tbody的内容。
                // 下面三者构成了总体的左下角的内容。
                info : "显示第_START_ 到第 _END_ 条记录，共_MAX_ 条记录，共_PAGES_ 页",// 左下角的信息显示，大写的词为关键字。
                infoEmpty : "0条记录",// 筛选为空时左下角的显示。
                infoFiltered : ""// 筛选之后的左下角筛选提示，
            },
            paging : true,
            pagingType : "full_numbers"// 分页样式的类型full_numbers
        });

前台与后台交互：

//删除违纪学生信息-殷伟涛-2017年2月20日19:59:32
function delStudentDisciplineInfo()
{
    var  fieldIdArray= [];
    var checkboxs = document.getElementsByName("box");
    for (var i = 0; i < checkboxs.length; i++) {
        if (checkboxs[i].checked) {
        var navalue = checkboxs[i].value;
        fieldIdArray.push(navalue);
        }
    }
    
    $.ajax({
        type : "POST",
        asysc : "false",
        url : "delStudentDisciplineInfo?fieldIdArray="+fieldIdArray,
        success : function(data)
        {
            if(data==true)
            {
                 swal("删除成功");
                 table.ajax.reload();
            }
            else
            {
                 swal("删除失败！")
            }
        }
    })
}