table header 上的蒲公英数据tables 复选框

Question

我想要一列用于 select 多行的复选框。我设法在每一行上创建了一个复选框，但我还想在标签上有一个复选框，以便当我选中 header 上的复选框时，它会自动 select 列上的所有复选框。我怎样才能做到这一点？

PS：我正在使用 JSP

<form id="form">
    <div style="text-align:right; padding-bottom:1em;">
        <button type="submit">Submit form</button>
     </div>
    <datatables:table id="owners" data="${selections}" row="owner" theme="bootstrap2" 
                      cssClass="table table-striped" pageable="false" info="false" export="pdf">
        <datatables:column title="Name" cssStyle="width: 150px;" display="html">
            <spring:url value="/owners/{ownerId}.html" var="ownerUrl">
                <spring:param name="ownerId" value="${owner.id}"/>
            </spring:url>
            <a href="${fn:escapeXml(ownerUrl)}"><c:out value="${owner.firstName} ${owner.lastName}"/></a>
        </datatables:column>
        <datatables:column title="Name" display="pdf">
            <c:out value="${owner.firstName} ${owner.lastName}"/>
        </datatables:column>
        <datatables:column title="Address" property="address" cssStyle="width: 200px;"/>
        <datatables:column title="City" property="city"/>
        <datatables:column title="Telephone" property="telephone"/>
        <datatables:column title="Pets" cssStyle="width: 100px;">
            <c:forEach var="pet" items="${owner.pets}">
                <c:out value="${pet.name}"/>
            </c:forEach>
        </datatables:column>
        <datatables:column sortable="false" filterable="false">
            <input type="checkbox" name="check${owner.id}" value="${owner.id}">
        </datatables:column>
        <datatables:export type="pdf" cssClass="btn" cssStyle="height: 25px;" />
    </datatables:table>
</form>

Answer 1

您可以使用 <datatables:columnHead> 标签自定义 header 列。

<form id="form">
    <div style="text-align:right; padding-bottom:1em;">
        <button type="submit">Submit form</button>
     </div>
    <datatables:table id="owners" data="${selections}" row="owner" theme="bootstrap2" 
                      cssClass="table table-striped" pageable="false" info="false" export="pdf">
        ...
        <datatables:column sortable="false" filterable="false">
            <datatables:columnHead>
                <input type="checkbox" onclick="$('#owners').find(':checkbox').attr('checked', this.checked);" />
            </datatables:columnHead>
            <input type="checkbox" name="check${owner.id}" value="${owner.id}">
        </datatables:column>
        ...
    </datatables:table>
</form>

位于 <datatables:columnHead> 标签内的所有内容都将放置在相应的列 header。

参考：http://dandelion.github.io/datatables/docs/ref/jsp/columnhead.html

table header 上的蒲公英数据tables 复选框

Dandelion Datatables checkbox on table header

javascript

checkbox

jsp

jquery-datatables

dandelion