DataTables-データを並べ替えるテーブルヘッダーのテキストのみをクリックします
Gogoku7
私は現在、ビューでDataTablesを使用して、ヘッダーをクリックすることでテーブルのコンテンツを並べ替えることができるASP.NETMVCアプリケーションに取り組んでいます。
顧客は、クリックしてその列のデータをテーブルヘッダーのテキストのみに並べ替えることができる領域を望んでいます。
例を示すために画像を含めています。
現在、青い四角はその列のデータを並べ替えるためにクリックできる領域です。顧客は、赤い四角がデータを並べ替えるためにクリックできる領域であることを望んでいます。
VisualStudioのビューのテーブルは次のようになります。
<table class="table table-hover dataTable" id="areatable">
<thead>
<tr>
<th>
th1
</th>
<th>
th2
</th>
<th>
th3
</th>
<th data-orderable="false">
th4
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.Number
</td>
<td>
@item.Alarm
</td>
<td>
<!--NotImplemented-->
</td>
<td>
@Html.ActionLink("Details", "Index", "", null, null)
</td>
</tr>
}
</tbody>
</table>
ブラウザでURLに移動すると、1つのテーブルヘッダーが次のようになります。
<th class="sorting_asc"
tabindex="0"
aria-controls="areatable"
rowspan="1"
colspan="1"
aria-sort="ascending"
aria-label="th1: activate to sort column descending"
style="width: 442px;">
th1
</th>
DataTablesを初期化するJavaScriptは次のようになります。
function InitDatatables() {
$('table.dataTable')
.DataTable({
"paging": false,
"ordering": true,
"info": false,
"searching": true,
"language": {
"search": "Zoeken: ",
"zeroRecords": "Geen bronnen gevonden."
}
});
// This code is to initially hide the filter/search bar.
$("div.dataTables_filter").hide();
$('div.dataTables_filter input').addClass('form-control').css({ width: 'auto', display: 'inline-block' });
$('div.dataTables_filter label').prop('disabled', true).css({ float: 'left', marginLeft: '14px' });
}
少し見回したところ、似たような質問は見つかりませんでした。
テーブルヘッダーのテキストを[a] [/ a]タグにラップし、JQueryを使用して[th] [/ th]タグから「class」、「aria-sort」、「aria-label」を削除して追加してみました。 [a] [/ a]タグに。JQueryの経験が不足していたため、これは成功しませんでした。
inspect要素を使用してブラウザの[th] [/ th]タグから上記の属性を手動で削除する場合は常に、テーブルヘッダーをクリックすると、属性が[th] [/ th]タグに自動的に追加されます。これを行うのはDataTables自体だと思います。
私が探しているものを達成する方法、または少なくとも要求どおりに機能しているように見せるための方法はありますか？
ありがとうございました。
vibs2006
基本的に2つのステップを実行することでこれを達成できます
- ターゲット列のセルからイベントリスナーを削除します（セル全体をクリックできるため）
- ターゲットスパン（あなたの場合は画像）にクリックハンドラーを追加します。
実例を示すためにフィドルを追加しました。スパンタグを削除して、スパンの代わりに画像を挿入するだけです。
$(document).ready( function () {
var table = $('#example').DataTable();
//Turning Off ALL event listeners for the Name Table Cell
$(".targetHeaderCell").off();
//Adding cursor class to testSpan and Removing Cursor class from overall header
$(".targetHeaderCell").css("cursor","default");
$("#testSpan").css("cursor","pointer");
var booleanSortCol1 = false;
// Attaching CLICK Event Handler on Name Span
$("#testSpan").on("click",function(){
if (booleanSortCol1 == false)
{
table.order([0, 'desc']).draw();
booleanSortCol1 = true;
}
else
{
table.order([0, 'asc']).draw();
booleanSortCol1 = false;
}
});
} );body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div>
<table id="example" class="display nowrap cell-border" width="100%">
<thead>
<tr>
<th style="text-align:left;" class="targetHeaderCell"><span id="testSpan" style="border:1px solid red;padding:0;margin:0;box-sizing:content-box;">Name</span></th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Datatablesテーブルヘッダースパンをクリックしたときの列の並べ替えを有効/無効にします
- 2
DataTablesのエクスポートオプション：テーブルヘッドからhtmlを削除します
- 3
ボタンをクリックすると、datatablesテーブルのすべてのレコードを表示します
- 4
DataTablesは、数値とテキストの混合列を並べ替えます
- 5
DataTables：テーブルセルにクラスを追加しますが、テーブルヘッダーは追加しませんか？
- 6
フォーマットされたデータを使用してレンダリングし、DataTables.netの生データを使用して並べ替えます
- 7
jQuery dataTables：カスタムフィルターが適用されたテーブルを並べ替えると、行が消えます
- 8
DataTables の並べ替えとフィルター情報を更新する方法
- 9
Datatables、データセットに別の列を追加しますが、テーブルには表示しません
- 10
Angular-Datatables-デフォルト設定を使用してテーブルを並べ替え可能にするにはどうすればよいですか？
- 11
Datatablesを使用してLaravelのピボットテーブルからデータを取得する方法
- 12
初めてDataTablesヘッダーから並べ替えアイコンを非表示にする方法
- 13
DataTables、列の値にコンマが含まれるCSVファイルにデータテーブルをエクスポートします
- 14
jQuery DataTables：並べ替え機能を利用できるようにしながら、元のデータソースの順序で行を表示します
- 15
オンクリック：DataTables内のボタンのテキストを無効にして変更します
- 16
AJAXのフォーマットされた文字列ではなく、データ型でDataTablesの列を並べ替えます
- 17
DataTablesのテーブルヘッダー列の幅とテーブル本体の列幅の不一致を解決する方法はありますか？
- 18
DataTablesは、可変量のテーブルヘッダーを使用して関数をレンダリングします
- 19
複数のDatatablesと1つのテーブルヘッダーのみが調整されます
- 20
datatablesサーバー処理を使用してテーブル列のデータをフォーマット/カスタマイズする方法は？
- 21
ダッシュとドットを使用したDatatablesの並べ替え
- 22
Jquery DataTables-スクロールYが有効になっている場合、複雑なヘッダーを持つテーブルの最後の行を削除します
- 23
Datatablesは、サーバー側のフィルターテーブルにコンボボックスを追加します
- 24
datatablesのデフォルトの並べ替えを無効にする方法は？
- 25
Datatablesの列ヘッダーで素晴らしいフォントのアイコンとテキストを使用する
- 26
DTを使用してテーブルをエクスポートするときにフォーマットを維持する（DataTablesボタン拡張）
- 27
datatablesヘッダーセルでdivをホバーします
- 28
Datatablesの列をすべての列のサブセットで並べ替える
- 29
非常に大きなデータセットを持つDataTablesで、複数のテーブルからデータを取得しますか？
コメントを追加