前提・実現したいこと
DataTablesとそのプラグインRowsGroupを用いてテーブルを作成していますが、一部のカラムでソート機能が思い通りに動きません。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 5 6 <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 7 <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script> 8 <script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script> 9 10 <meta charset=utf-8 /> 11 <title>DataTables - JS Bin</title> 12 </head> 13 <body> 14 <div class="container"> 15 <table id="example" class="display" width="100%"> 16 </table> 17 </div> 18 </body> 19</html>
JavaScript
1$(document).ready( function () { 2 var data = [ 3 4 ['1', 'Group3', 'Element1'], 5 ['1', 'Group3', 'Element2'], 6 ['2', 'Group2', 'Element1'], 7 ['2', 'Group2', 'Element2'], 8 ['3', 'Group1', 'Element1'], 9 ['3', 'Group1', 'Element2'], 10 11 ]; 12 var table = $('#example').DataTable({ 13 columns: [ 14 { 15 title: 'No', 16 }, 17 { 18 title: 'Group name', 19 }, 20 { 21 title: 'Element', 22 }, 23 24 ], 25 data: data, 26 rowsGroup: [0,1], 27 }); 28} ); 29
実行結果
Noカラムではソートできますが、Group nameカラムではソートできません。
Group nameカラムでもソートがしたいです。
Elementはグループの中だけでソートしていますが、こちらについてはこの動きでかまいません。
試したこと
Elementがグループの中だけでソートされていることに着目し、先頭カラムにダミー行を設置して全体を一つのグループにしてみましたが、動作は変わりませんでした。(Noカラムソート可、Group nameソート不可)
JavaScript
1$(document).ready( function () { 2 var data = [ 3 4 ['', '1', 'Group3', 'Element1'], 5 ['', '1', 'Group3', 'Element2'], 6 ['', '2', 'Group2', 'Element1'], 7 ['', '2', 'Group2', 'Element2'], 8 ['', '3', 'Group1', 'Element1'], 9 ['', '3', 'Group1', 'Element2'], 10 11 ]; 12 var table = $('#example').DataTable({ 13 columns: [ 14 { 15 title: 'Dammy', 16 }, 17 { 18 title: 'No', 19 }, 20 { 21 title: 'Group name', 22 }, 23 { 24 title: 'Element', 25 }, 26 27 ], 28 data: data, 29 rowsGroup: [0,1,2], 30 }); 31} );
サンプル
現状はこちらです。
https://jsfiddle.net/489sur7p/
求めているのはこんなイメージです(tablesorterで作成)
tablesorter使えよ、って話になるかもしれませんが・・・
https://jsfiddle.net/8op7qj5b/
NoカラムでもGroupカラムでも並べ替えができるようにしたいです。
あなたの回答
tips
プレビュー