DataTable - 在jQuery中获取所有选定行的简便方法

时间：2015-08-21 11:19:00

标签： javascript jquery jsp datatable

如何从 jQuery DataTable （https://datatables.net）获取所有选定的行。

这里在stackoverflow中找到了计算所选行的方法，但是我需要将选定的行数据抛到下一个JavaServletPage来使用它。

我的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中编写函数的方法 - Config - Part？

喜欢这些：

$('#...').on( ' ', ' ', function () {
     <!-- for each row write to an array, set this array as attribute to threw them? -->
} );

任何帮助将不胜感激！

1 个答案:

答案 0 :(得分：5)

您可以遍历行数据

$('#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');
});

演示：Demo Example

相关问题
最新问题