dataTable 批量选中 当前页的所有列表数据
jsp部分代码：列表数据通过dataTable加载
<div class="widget-header widget-header-flat">
<div >
<button type="button" class="btn btn-small btn-primary" id="batchApproveBtn">批量审批</button>
</div>
</div>
<table id="loanList" class="table table-striped table-hover">
<thead>
<tr>
<th><input type="checkbox" name="select_all" id="select-all"></th>
<th>借款申请单号</th>
<th>借款人</th>
<th>金额</th>
<th>期限</th>
<th>年化利率</th>
<th>还款方式</th>
<th>状态</th>
<th>提交时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" src="js/jquery.dataTables_v10.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.bootstrap.js"></script>
js代码：
var oTable = null;
function initTable(data) {
if (oTable != null) {
oTable.fnDestroy();
}
oTable = $('#loanList').dataTable({ //dataTable加载数据
"data": data,
"aaSorting": [[7, "desc"]],
"aoColumns": [
{"mData":""},
{"mData": "title"},
{"mData": "user"},
{"mData": "amount"},
{"mData": "duration"},
{"mData": "rate"},
{"mData": "method"},
{"mData": "status"},
{"mData": "timeSubmit"}
],
"aoColumnDefs": [
{ //为每一行数据添加一个checkbox，
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, row){
return '<input class="checkbox_select" type="checkbox" data-status="'+ row.status + '"name="id[]" value="' + $('<div/>').text(row.id).html() + '">';
}
},
{
"aTargets": [1], //title
"mRender": function (title, type, row) {
return '<a href="loan/request/' + row.id + '" target="_blank">' + title + '</a>';
}
},
{
"aTargets": [2], //user
"mRender": function(user, type, row) {
return '<a href="user/' + user.id + '" target="_blank">' + user.loginName + '</a>';
}
},
{
"aTargets": [3], //amount
"mRender": function(amount, type, row) {
return '<span class="red bold">￥' + formatAmount(amount, 0) + '</span>';
}
}, {
"aTargets": [4], //duration
"mRender": function(duration, type, row) {
return duration.totalMonths + '个月';
}
}, {
"aTargets": [5], //rate
"mRender": function(rate, type, row) {
if (rate % 100 == 0) {
return rate / 100 + '%';
}
return (parseFloat(rate) / 100).toFixed(2) + '%';
}
},
{
"aTargets": [6], //method
"mRender": function(method, type, row) {
return repayMethod[method];
}
}, {
"aTargets": [7], //Status
"mRender": function(status, type, row) {
return fundStatus[status];
}
}, {
"aTargets": [8], //Status
"mRender": function(date, type, row) {
return (new Date(date)).Format("yyyy-MM-dd hh:mm");
}
}],
"oLanguage": {
"sLengthMenu": "显示 _MENU_ 条记录",
"sSearch": "搜索:",
"sInfo": "显示第 _START_ - _END_ 条记录，共 _TOTAL_ 条",
"sInfoEmpty": "没有符合条件的记录",
"sZeroRecords": "没有符合条件的记录"
}
});
//页面上点击此属性，将当前页的列表数据全部选中
$('#select-all').on('click', function () {
if (this.checked) {
$('.checkbox_select').each(function () {
this.checked = true;
});
} else {
$('.checkbox_select').each(function () {
this.checked = false;
});
}
});
}
//默认会加载的方法，从后台查询数据，
$(function() {
var params = {
startDate: '',
endDate: '',
};
$.post("loan/getLoanRequestList", params, function(requests) {
initTable(requests);
});
$('#batchApproveBtn').click(function(){
var selectAtleaseOne = false;
var selectLoans = [];
var selectLoansStatus = [];
$('.checkbox_select').each(function () {
if($(this).is(':checked')){
selectAtleaseOne = true;
selectLoans.push($(this).val());
selectLoansStatus.push($(this).data("status"));
}
});
if(!selectAtleaseOne) {
alert("请至少选择一个借款申请");
return;
}
var isNeedApprove = selectLoansStatus.some(function(status){
return status != 'UNASSIGNED';
});
if(!isNeedApprove) {
$.post("loan/request/batchApprove", {loanIds: selectLoans}, function (data) { // callback
if (data.success) {
alert("批量审批成功");
} else {
alert(data.error[0].message);
}
location.reload();
});
}else{
alert("选中的借款请求中存在无法审批的请求");
}
console.log(selectLoans);
});
});