表格標題上的蒲公英數據表複選框

我想有一個複選框的列來選擇多行。我設法在每一行創建一個複選框，但我也希望在標籤上有一個複選框，這樣當我選中標題上的複選框時，它會自動選擇列上的所有複選框。我怎麼能做到這一點？表格標題上的蒲公英數據表複選框

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>

來源

2015-05-17 Jasper Bernales

您可以使用<datatables:columnHead>標籤定製標題列。

<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>標記內的所有東西都將放置在相應的列標題中。

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

來源

2015-05-17 23:03:05 tduchateau

我有此錯誤：「屬性的uid無效的標籤columnHead根據TLD」 –

您正在使用什麼蒲公英，數據表的版本？ – tduchateau

它是0.10.1 .... –

表格標題上的蒲公英數據表複選框

回答

相關問題