JQuery datatables plugin を使用して、テーブルフィールドをソートしています。私の質問は、特定の列の並べ替えを無効にするにはどうすればよいですか?私は次のコードを試しましたが、うまくいきませんでした:
"aoColumns": [
{ "bSearchable": false },
null
]
また、次のコードも試しました。
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [ 1 ] }
]
しかし、これでも望ましい結果は得られませんでした。
これはあなたが探しているものです:
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
DataTables 1.10.5から、HTML5 data- *属性を使用して初期化オプションを定義できるようになりました。
- dataTablesドキュメント:HTML5 data- *属性-テーブルオプション
そのため、ソートしたくない列のth
でdata-orderable="false"
を使用できます。たとえば、次の表の2番目の列「アバター」はソートできません。
<table id="example" class="display" width="100%" data-page-length="25">
<thead>
<tr>
<th>Name</th>
<th data-orderable="false">Avatar</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>
https://jsfiddle.net/jhfrench/6yxvxt7L/の実際の例 を参照してください。
最初の列のソートを無効にするには、以下のdatatables jqueryのコードを試してください。 nullは、ここでのソートの有効化を表します。
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
Datatables 1.9.4の使用このコードで最初の列の並べ替えを無効にしました。
/* Table initialisation */
$(document).ready(function() {
$('#rules').dataTable({
"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sLengthMenu" : "_MENU_ records per page"
},
// Disable sorting on the first column
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0 ]
} ]
});
});
編集:
no-sort
で<th>
クラスを使用しても無効にできます。
この初期化コードを使用します。
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]
EDIT 2
この例では、古いブログ投稿に続いて、ブートストラップでDatablesを使用しています。現在、 ブートストラップを使用したDatatablesのスタイル設定 に関する更新された資料のリンクが1つあります。
私が使用しているのは、カスタム属性をthead tdに追加し、そのattr値を自動的にチェックすることでソートを制御することです。
したがって、HTMLコードは
<table class="datatables" cellspacing="0px" >
<thead>
<tr>
<td data-bSortable="true">Requirements</td>
<td>Test Cases</td>
<td data-bSortable="true">Automated</td>
<td>Created On</td>
<td>Automated Status</td>
<td>Tags</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>
そして、データテーブルを初期化するためのJavaScriptは(テーブル自身から動的にソート情報を取得します;)
$('.datatables').each(function(){
var bFilter = true;
if($(this).hasClass('nofilter')){
bFilter = false;
}
var columnSort = new Array;
$(this).find('thead tr td').each(function(){
if($(this).attr('data-bSortable') == 'true') {
columnSort.Push({ "bSortable": true });
} else {
columnSort.Push({ "bSortable": false });
}
});
$(this).dataTable({
"sPaginationType": "full_numbers",
"bFilter": bFilter,
"fnDrawCallback": function( oSettings ) {
},
"aoColumns": columnSort
});
});
columnDefs
がクラスを受け入れるようになりました。マークアップで無効にする列を指定する場合は、これが好ましい方法だと思います。
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th class="datatable-nosort">Actions</th>
</tr>
</thead>
...
</table>
次に、JSで:
$("table").DataTable({
columnDefs: [{
targets: "datatable-nosort",
orderable: false
}]
});
特定の列を無効にするために使用できるものは次のとおりです。
$('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});
したがって、あなたがしなければならないのは、ソート可能にしたくない列に「orderable」:falseを追加することだけです。
$("#example").dataTable(
{
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5]
}]
}
);
1.10.5の時点で、単に含める
'orderable:false'
columnDefsで列をターゲットにします
「ターゲット:[0,1]」
テーブルは次のようになります。
var table = $('#data-tables').DataTable({
columnDefs: [{
targets: [0],
orderable: false
}]
});
FIRST列のorderable
プロパティをfalseに設定すると、mustもデフォルトのorder
列を設定します。そうしないと、最初の列がデフォルトの順序列であるため機能しません。以下の例では、最初の列での並べ替えを無効にしますが、2番目の列をデフォルトの順序列として設定します(dataTablesのインデックスはゼロベースであることを忘れないでください)。
$('#example').dataTable( {
"order": [[1, 'asc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
単一列のソートを無効にするには、この例を試してください:
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }
]
});
});
</script>
複数の列については、この例を試してください。列番号を追加するだけです。デフォルトでは0から始まります
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
]
});
});
</script>
ここではColumn 3
のみが機能します
Bhavishの答えを更新するには彼らは属性名を変更したと思います。これを試して:
<thead>
<tr>
<td data-sortable="false">Requirements</td>
<td data-sortable="false">Automated</td>
<td>Created On</td>
</tr>
</thead>
<tbody>
<tr>
<td>
"aoColumnDefs" : [
{
'bSortable' : false,
'aTargets' : [ 0 ]
}]
ここで0
は列のインデックスです。複数の列を並べ替えない場合は、comma(,)
で区切られた列インデックス値に言及してください
これは単一の列で私のために働く
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false
}]});
クラスを使用する:
<table class="table table-datatable table-bordered" id="tableID">
<thead>
<tr>
<th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
<th class="sort-alpha">Employee name</th>
<th class="sort-alpha">Send Date</th>
<th class="sort-alpha">Sender</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
<td>Alexander Schwartz</td>
<td>27.12.2015</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#tableID').DataTable({
'iDisplayLength':100,
"aaSorting": [[ 0, "asc" ]],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosort']
}]
});
});
</script>
これで、「nosort」クラスを<TH>に渡すことができます
列で.notsortable()メソッドを直接使用できます
vm.dtOpt_product = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
vm.dtOpt_product.withPaginationType('full_numbers');
vm.dtOpt_product.withColumnFilter({
aoColumns: [{
type: 'null'
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'select',
bRegex: false,
bSmart: true,
values: vm.dtProductTypes
}]
});
vm.dtColDefs_product = [
DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
];
2つの方法があり、1つはテーブルヘッダーを定義するときにhtmlで定義されます
<thead>
<th data-orderable="false"></th>
</thead>
別の方法は、JavaScriptを使用することです。たとえば、テーブルがあります
<table id="datatables">
<thead>
<tr>
<th class="testid input">test id</th>
<th class="testname input">test name</th>
</thead>
</table>
その後、
$(document).ready(function() {
$('#datatables').DataTable( {
"columnDefs": [ {
"targets": [ 0], // 0 indicates the first column you define in <thead>
"searchable": false
}
, {
// you can also use name to get the target column
"targets": 'testid', // name is the class you define in <th>
"searchable": false
}
]
}
);
}
);
次のコードを使用して、最初の列の順序付けを無効にします。
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
デフォルトの順序付けを無効にするには、次も使用できます。
$('#example').dataTable( {
"ordering": false,
} );
姓の列を非表示にするなど、既にいくつかの列を非表示にする必要がある場合。 fnameとlnameを連結する必要があったので、クエリを作成しましたが、その列はフロントエンドから非表示にしました。このような状況でのソートの無効化の変更は次のとおりです。
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 3 ] },
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
ここに非表示機能があることに注意してください
"columnDefs": [
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
次に、それを"aoColumnDefs"
にマージしました
次のような負のインデックスも使用できます。
$('.datatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ -1 ] }
]
});
答えはここにあります!
targets
は列番号で、0から始まります
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
コードは次のようになります。
$(".data-cash").each(function (index) {
$(this).dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"bSort": false,
"aaSorting": []
});
});