js部分的代码：
/*批量删除*/
$('#Button1').click(function () {
var mymessage=confirm("确认删除吗？");
if(mymessage==true) {
$("input[name='test']:checked").each(function () {
n = $(this).parents("tr").index() + 1; // 获取checkbox所在行的顺序
$("table#dataTable").find("tr:eq(" + n + ")").remove();
});
}
})
不要忘记给复选框加上一个input type="checkbox" name="test"
jsp的部分代码：
<th > 全选
<input type="checkbox" name="keeperUserGroup-checkable" class="group-checkable" data-set="#sample_1 .checkboxes" />
</th>
----------------------------------我是分割线上面是实现功能的重要代码---------------------------
再贴出这个页面的完整的代码：有需要的朋友可以根据以下代码修改成自己想要的效果：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<%@include file="../includes/head.jsp" %>
<title>${menu.menuName}</title>
<link rel="stylesheet" type="text/css"
href="<c:url value="/js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css"/>"/>
</head>
<body class="page-header-fixed page-quick-sidebar-over-content">
<%@include file="../includes/top.jsp" %>
<div class="page-container">
<%@include file="../includes/sidebar.jsp" %>
<div class="page-content-wrapper">
<div class="page-content">
<%@include file="../includes/current.jsp" %>
<div class="row">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="${menu.icon}"></i>${menu.menuName}
</div>
<div class="actions">
<a href="javascript:;" class="btn default yellow-stripe" id="dataTableReload">
<i class="fa fa-refresh"></i><span class="hidden-480">重新载入</span></a>
<a href="javascript:;" class="btn default yellow-stripe"><i
class="fa fa-minus"></i><span class="hidden-480"
id="Button1"> 删除信息</span></a>
</div>
</div>
<div class="portlet-body">
<div class="table-container">
<table class="table table-striped table-bordered table-hover" id="dataTable">
<thead>
<tr role="row" class="heading">
<th > 全选
<input type="checkbox" name="keeperUserGroup-checkable" class="group-checkable" data-set="#sample_1 .checkboxes" />
</th>
<th>告警日期</th>
<th>告警类型</th>
<th class="a">人资编号</th>
<th>人资名称</th>
<th>人资类型</th>
<th>型号/性别</th>
<th class="b">告警详情</th>
<th>位置详情</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade bs-modal-lg" id="modalDialogRole" tabindex="-1"
data-keyboard="false" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title" id="modalTitleRole">查看信息</h4>
</div>
<div class="tab-content">
1111
<br>
11
1111
<br>
11
1111
<br>
11
</div>
<div class="modal-footer">
<button type="button" class="btn default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<jsp:include page="../includes/confirmdiv.jsp"/>
<%@include file="../includes/footer.jsp" %>
<%@include file="../includes/bottomscript.jsp" %>
<script type="text/javascript"
src="<c:url value="/js/bower_components/DataTables/media/js/jquery.dataTables.min.js"/>"></script>
<script type="text/javascript"
src="<c:url value="/js/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/global/scripts/datatable.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/alert/alertHistory.js"/>"></script>
<script type="text/javascript">
$(function () {
alertHistoryTable().init();
});
</script>
</body>
</html>
================================js文件===============================
var alertHistoryTable = function() {
// 预命名
// var defaultOptions = CONSTANT.DATA_TABLES.DEFAULT_OPTION;
// var ellipsis = CONSTANT.DATA_TABLES.RENDER.ELLIPSIS;
var pagePath = "alert/";
var dic = {
field : {}
};
var url = {
list : basePath + pagePath + "getAlertHistoryListPage",
check : basePath + pagePath + "checkAlert"
};
var $table = $("#dataTable");
var $tbody = $("tbody", $table);
var _table = {};
var dataTableConfig = {
"ajax" : {
"url" : url.list
// ajax source
},
"columns" : [
{
className: "td-checkbox",
orderable : false,
bSortable : false,
data : "id",
render : function(data, type, row, meta) {
var content = '<label style="margin-left:32px;" class="mt-checkbox mt-checkbox-single mt-checkbox-outline">';
content += ' <input type="checkbox" name="test" class="group-checkable" value="' + data + '" />';
content += '</label>';
return content;
}
},
{
data : 'alertData',
orderable : false,
searchable : false,
},
{
data : 'alertClass',
orderable : false,
searchable : false,
render : function(data, type, row) {
if (data == "1") {
return "位置报警";
} else {
return "SOS";
}
}
},
{
data : 'deviceId',
orderable : false,
searchable : false
},
{
data : 'deviceName',
orderable : false,
searchable : true,
},
{
data : 'deviceClass',
orderable : false,
searchable : true,
render : function(data, type, row) {
if (data = "0") {
return "资产";
} else {
return "人员";
}
}
},
{
data : 'deviceVersion',
orderable : false,
searchable : true,
},
{
data : 'alertDescripe',
orderable : false,
searchable : true,
},
{
data : 'checked',
orderable : false,
render : function(data, type, full) {
var icon = data == '1' ? "fa fa-eye"
: "fa fa-eye-slash";
return data == '1' ? '<i class=" + icon
+ "></i><a class="edit" deviceId="' + full.id
+ '" style="cursor:pointer;">查看</a>'
: '<i class="
+ icon
+ "></i><a class="edit" deviceId="'
+ full.id
+ '"><font color="red" style="cursor:pointer;">点击查看</font></a>';
}
} ]
};
/*批量删除*/
$('#Button1').click(function () {
var mymessage=confirm("确认删除吗？");
if(mymessage==true) {
$("input[name='test']:checked").each(function () {
deleteAssetInfo($(this).attr("xxxId"));
$.ajax({
url : "xxxxxxxxxxxxx",
data : "id=" + $(this).val(),
dataType : "json",
});
n = $(this).parents("tr").index() + 1; // 获取checkbox所在行的顺序
$("table#dataTable").find("tr:eq(" + n + ")").remove();
});
}
})
$table.on("click", "a.edit", function() {
/*alert($(this).attr("deviceId"));
checkAlert($(this).attr("deviceId"));
dataTable.reloadTable();*/
customGlobal.clearFormAndShowDialog("modalDialogRole");
});
/** blockUIConfig* */
/*
* var blockUIConfig = { message : '<h1>请稍后...</h1>', overlayCSS : {
* backgroundColor : '#0f0f0f', opacity : '0' } }; var block =
* function(target, config) { target.block(config || blockUIConfig); };
*/
/** initConfig* */
var initConfig = {
src : $table,
onQuery : function(data) {
},
onSortColumn : function(sortColumn, sortDirection) {
return customGlobal.onSortColumnDefault(sortColumn, sortDirection);
},
dataTable : dataTableConfig
};
var handleRecords = function() {
dataTable = new Datatable();
dataTable.init(initConfig);
_table = dataTable.getDataTable();
};
return {
init : function() {
handleRecords();
},
_table : _table
}
};