bootstrap - table +CheckBox 删除功能
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("删除失败!") } } }) }