基於數據表Jquery的插件-表-表中可折疊的問題-Javascript / HTML
[英]Datatable Jquery based plugin - table - issues with collapsible in table - Javascript/HTML
問題描述
我需要創建一個基於Web的贈款表，重點放在可以訪問醫療服務並可以按結果進行篩選和排序的方式。 盡管我從來沒有真正使用過Javascript（很久以前還使用HTML），但是通過使用Jquery DataTable插件，我已經能夠完成大部分目標。 我想為我們的用戶提供一個選項，點擊折疊按鈕以查看摘要（通常為1000個字符），如果他們想要查找其他詳細信息。
我已經在Stackoverflow上使用了很長一段時間，並且我知道它至少會做出嘗試，而我確實做到了。 可悲的是，我知道我要離開了。 我很感謝這里的任何幫助，因為一旦我開始工作，我就完成了這個項目！
$(document).ready(function() { $('#example').DataTable(); });
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> </script> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Project Name</th> <th>Project Number</th> <th>PI(s)</th> <th>End Date</th> <th>Organization</th> <th>Abstract</th> </tr> </thead> <tbody> <tr> <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td> <td>DHI 06-010</td> <td>Diane Cowper, Ph.D </td> <td>9/30/2007</td> <td>VA</td> <td> <button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button> <div id="demo" class="collapse">Abstract language example 2.</div> </ </td> <tr> <td>Access to Specialty Dental Care - Racial Disparities</td> <td>R01-234i482</td> <td>John Summerton, MD</td> <td>1/1/2020</td> <td>AHRQ</td> <td> <button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button> <div id="demo" class="collapse">Abstract language example 1.</div> </ </td> </tr> </tbody> </table>
2 個解決方案
解決方案1
3 已采納 2019-08-02 15:32:26
這是使用DataTable 響應式插件的演示
-
-
all-始終顯示 -
none不顯示為列，而是顯示在子行中 -
never-從不顯示 -
control-用於列responsive.details.type選項。
所以，最后
th在頭必須有class="none" -
-
這可以是列索引之一，也可以是jQuery選擇器
$(document).ready(function() { $('#example').DataTable({ responsive: { details: { type: 'column', target: '.collapse' } }, columnDefs: [{ orderable: false, targets: 5 }], }); });
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet" /> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> </script> <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script> <table id="example" class="display"> <thead> <tr> <th class="all">Project Name</th> <th class="all">Project Number</th> <th class="all">PI(s)</th> <th class="all">End Date</th> <th class="all">Organization</th> <th class="all">Abstract</th> <th class="none"></th> </tr> </thead> <tbody> <tr> <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td> <td>DHI 06-010</td> <td>Diane Cowper, Ph.D </td> <td>9/30/2007</td> <td>VA</td> <td> <button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button> </td> <td>Abstract language example 2.</td> </tr> <tr> <td>Access to Specialty Dental Care - Racial Disparities</td> <td>R01-234i482</td> <td>John Summerton, MD</td> <td>1/1/2020</td> <td>AHRQ</td> <td> <button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button> </td> <td>Abstract language example 1.</td> </tr> </tbody> </table>
解決方案2
1 2019-08-02 15:39:50
您可以使用jQuery使用這些函數的hide()和show()元素，也可以使用toggle()
$(document).ready(function() { $('#example').DataTable(); $('#demo').toggle(); }); function myFunction(){ $('#demo').toggle(); }
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"> </script> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Project Name</th> <th>Project Number</th> <th>PI(s)</th> <th>End Date</th> <th>Organization</th> <th>Abstract</th> </tr> </thead> <tbody> <tr> <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td> <td>DHI 06-010</td> <td>Diane Cowper, Ph.D </td> <td>9/30/2007</td> <td>VA</td> <td> <button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example" onclick="myFunction()">Simple collapsible</button> <div id="demo" class="collapse" >Abstract language example 2.</div> </td> </tr> </tbody> </table> </body>
使用javascript函數打印出動態html表（jquery datatable插件）
[英]Printing out dymanic html table (jquery datatable plugin) using javascript function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.