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("删除失败!") } } }) }

浙公网安备 33010602011771号