DataTable-在jQuery中获取所有选定行的简便方法
问题描述：
如何从 jQuery数据表( https://datatables.net ).
在*中找到了计数选定行的方法，但是我需要选定的行数据将它们扔到下一个JavaServletPage进行处理.
Here in * found ways to count the selected rows, but I need the selected row data to threw these to next JavaServletPage to work with it.
我的DataTables代码配置:
<!-- ------- JS ----------------------------------------------------------------------------------------------------------- -->
<script type="text/javascript" src="src/packages/jQuery-2.1.4/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="src/packages/DataTables-1.10.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="src/packages/AutoFill-2.0.0/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" src="src/packages/ColReorder-1.2.0/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="src/packages/FixedColumns-3.1.0/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="src/packages/FixedHeader-3.0.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="src/packages/Responsive-1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="src/packages/Scroller-1.3.0/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="src/packages/Select-1.0.0/js/dataTables.select.min.js"></script>
<!-- ------- JS - Config -------------------------------------------------------------------------------------------------- -->
<script type="text/javascript">
$(document).ready(function() {
var lastBksId = null;
var rowClass = "odd"
var table = $('#table_view').DataTable({
scrollX: true,
scrollY: '76vh',
order: [[ 0, "desc" ]],
scrollCollapse: true,
paging: false,
info: false,
ordering: false,
searching: false,
fnRowCallback: function(row, data, index){
if (lastBksId == null){
lastBksId = data[0];
}
if (lastBksId == data[0]){
row.className = rowClass;
}
else {
if (rowClass == "odd"){ rowClass = "even"; }
else {rowClass = "odd"; }
row.className = rowClass;
lastBksId = data[0];
}
}
});
$('#table_view tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
} );
</script>
HTML-表格:
<!-- VIEW -->
<div id="view" class="view">
<%
EntityManager em = Persistence.createEntityManagerFactory("man-jpa").createEntityManager();
int pageSize = 200;
Class<NlHist> entyClass = NlHist.class;
CriteriaBuilder builder = em.getCriteriaBuilder();
CriteriaQuery<NlHist> criteriaQuery = builder.createQuery(entyClass);
Root<NlHist> from = criteriaQuery.from(NlHist.class);
CriteriaQuery<NlHist> select = criteriaQuery.select(from);
CriteriaQuery<NlHist> where = criteriaQuery.where(builder.isNotNull(from.get("pfcM")));
//CriteriaQuery<NlHist> having = criteriaQuery.having(builder.gt(builder.count(from.get("id")), 1));
TypedQuery<NlHist> typedQuery = em.createQuery(select);
typedQuery.setFirstResult(0);
typedQuery.setMaxResults(pageSize);
List<NlHist> rows = typedQuery.getResultList();
// Getting Table Headers
[...]
%>
<table class="display compact" id="table_view" cellspacing="0" style="color: black;">
<thead>
<tr style="background-color: #69b9ff;color: black;">
<th><c:out value="${id}">${id}</c:out></th>
<th><c:out value="${idm}">${idm}</c:out></th>
<th><c:out value="${sim}">${sim}</c:out></th>
<th><c:out value="${nim}">${nim}</c:out></th>
<th><c:out value="${onkz}">${onkz}</c:out></th>
<th><c:out value="${rfnr}">${rfnr}</c:out></th>
<th><c:out value="${toid}">${toid}</c:out></th>
<th><c:out value="${inlief}">${inlief}</c:out></th>
<th><c:out value="${bkto}">${bkto}</c:out></th>
<th><c:out value="${kdnr}">${kdnr}</c:out></th>
<th><c:out value="${sta}">${sta}</c:out></th>
<th><c:out value="${stat}">${stat}</c:out></th>
<th><c:out value="${ints}">${ints}</c:out></th>
<th><c:out value="${lats}">${lats}</c:out></th>
<th><c:out value="${rv}">${rv}</c:out></th>
<th><c:out value="${rvf}">${rvf}</c:out></th>
<th><c:out value="${pfc}">${pfc}</c:out></th>
<th><c:out value="${pfcm}">${pfcm}</c:out></th>
<th><c:out value="${ps}">${ps}</c:out></th>
<th><c:out value="${pa}">${pa}</c:out></th>
<th><c:out value="${ts}">${ts}</c:out></th>
<th><c:out value="${ra}">${ra}</c:out></th>
<th><c:out value="${iaid}">${iaid}</c:out></th>
<th><c:out value="${aa}">${aa}</c:out></th>
<th><c:out value="${io}">${io}</c:out></th>
</tr>
</thead>
<tbody>
<%
for(NlHist cols: rows){
pageContext.setAttribute("io", cols.get[..]());
pageContext.setAttribute("aa", cols.get[..]());
pageContext.setAttribute("iaid", cols.get[..]());
pageContext.setAttribute("ra", cols.get[..]());
pageContext.setAttribute("ts", cols.get[..]());
pageContext.setAttribute("pa", cols.get[..]());
pageContext.setAttribute("ps", cols.get[..]());
pageContext.setAttribute("pfcm", cols.get[..]());
pageContext.setAttribute("pfc", cols.get[..]());
pageContext.setAttribute("rvf", cols.get[..]());
pageContext.setAttribute("rv", cols.get[..]());
pageContext.setAttribute("lats", cols.get[..]());
pageContext.setAttribute("ints", cols.get[..]());
pageContext.setAttribute("stat", cols.get[..]());
pageContext.setAttribute("sta", cols.get[..]());
pageContext.setAttribute("kdnr", cols.get[..]());
pageContext.setAttribute("bkto", cols.get[..]());
pageContext.setAttribute("inlief", cols.get[..]());
pageContext.setAttribute("toid", cols.get[..]());
pageContext.setAttribute("rfnr", cols.get[..]());
pageContext.setAttribute("onkz", cols.get[..]());
pageContext.setAttribute("nim", cols.get[..]());
pageContext.setAttribute("sim", cols.get[..]());
pageContext.setAttribute("bksidm", cols.get[..]());
pageContext.setAttribute("bksid", cols.get[..]());
%>
<tr>
<td><c:out value="${bksid}">${bksid}</c:out></td>
<td><c:out value="${bksidm}">${bksidm}</c:out></td>
<td><c:out value="${sim}">${sim}</c:out></td>
<td><c:out value="${nim}">${nim}</c:out></td>
<td><c:out value="${onkz}">${onkz}</c:out></td>
<td><c:out value="${rfnr}">${rfnr}</c:out></td>
<td><c:out value="${toid}">${toid}</c:out></td>
<td><c:out value="${inlief}">${inlief}</c:out></td>
<td><c:out value="${bkto}">${bkto}</c:out></td>
<td><c:out value="${kdnr}">${kdnr}</c:out></td>
<td><c:out value="${sta}">${sta}</c:out></td>
<td><c:out value="${stat}">${stat}</c:out></td>
<td><c:out value="${ints}">${ints}</c:out></td>
<td><c:out value="${lats}">${lats}</c:out></td>
<td><c:out value="${rv}">${rv}</c:out></td>
<td><c:out value="${rvf}">${rvf}</c:out></td>
<td><c:out value="${pfc}">${pfc}</c:out></td>
<td><c:out value="${pfcm}">${pfcm}</c:out></td>
<td><c:out value="${ps}">${ps}</c:out></td>
<td><c:out value="${pa}">${pa}</c:out></td>
<td><c:out value="${ts}">${ts}</c:out></td>
<td><c:out value="${ra}">${ra}</c:out></td>
<td><c:out value="${iaid}">${iaid}</c:out></td>
<td><c:out value="${aa}">${aa}</c:out></td>
<td><c:out value="${io}">${io}</c:out></td>
</tr>
<% } %>
</tbody>
</table>
</div>
是在JS-配置-部分中编写函数的一种方法吗?
Is one way to write a function in my JS - Config - Part?
喜欢这些:
$('#...').on( ' ', ' ', function () {
<!-- for each row write to an array, set this array as attribute to threw them? -->
} );
任何帮助将不胜感激！
答
您可以遍历行数据
$('#button').click(function () {
var ids = $.map(table.rows('.selected').data(), function (item) {
return item[0]
});
console.log(ids)
alert(table.rows('.selected').data().length + ' row(s) selected');
});
演示:演示示例