bootstrap
table:
<table > cellspacing="0" width="100%"> <!-- <caption>学生违纪信息</caption> --> <thead > <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 });