web-dev-qa-db-ja.com

文字列を数値としてデータテーブルで並べ替える

私はデータテーブルを持っていて、1st、2nd ....のような値を含む数値としてソートしたいのですが、これが1st、10th、2ndのような値をソートするときの私のコードです。

$('#example').DataTable( {
   //      "columnDefs": [
   //   { "visible": false, "targets": 4 }
   // ],
"aaSorting": [[1,'asc']],
   "columnDefs": [ {
    "targets": [2,5,6],
    "orderable": false
  } ,
  {
    "targets": 0,
    "orderable": false
  },
  { "width": "5%", "targets": 0 },
  { "width": "8%", "targets": 1 }],

  initComplete: function () {

    this.api().columns().every( function () {
      var column = this;
      var select = $('<select><option value=""></option></select>')
      .appendTo( $(column.footer()).empty() )
      .on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex(
         $(this).val()
         );

        column
        .search( val ? '^'+val+'$' : '', true, false )
        .draw();
      } );

      column.data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
      } );
    } );
  }
});
jquerysortingjquery-uidatatables
5
sanjay

これを行うために私が知っている最も簡単な方法は、 Formatted Numbers プラグイン

次に例を示します。

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "formatted-num-pre": function ( a ) {
        a = (a === "-" || a === "") ? 0 : a.replace( /[^\d\-\.]/g, "" );
        return parseFloat( a );
    },
 
    "formatted-num-asc": function ( a, b ) {
        return a - b;
    },
 
    "formatted-num-desc": function ( a, b ) {
        return b - a;
    }
} );

$('#tbl_jaar').dataTable( {
     columnDefs: [
       { type: 'formatted-num', targets: 0 }
     ]
  } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="tbl_jaar">
  <thead>
    <tr>
      <th>Places</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st</td>
    </tr>
    <tr>
      <td>2nd</td>
    </tr>    
    <tr>
      <td>3rd</td>     
    </tr>   
    <tr>
      <td>4th</td>
    </tr>
    <tr>
      <td>5th</td>
    </tr>
    <tr>
      <td>6th</td>
    </tr>
    <tr>
      <td>7th</td>
    </tr>
    <tr>
      <td>8th</td>
    </tr>
    <tr>
      <td>9th</td>
    </tr>
    <tr>
      <td>10th</td>
    </tr>
  </tbody>
</table>
9
Wesley Smith

DataTableで直交データとHTML5を使用することをお勧めします。それはシンプルで良い解決策です。

構成の変更や追加のコーディングが必要ないため、これは単純なソリューションです。

また、データ表現からソート値を分離するため、優れたソリューションです。したがって、ユーザーに何でも表示し、必要に応じて値で並べ替えることができます。

各td要素には、data-order属性が必要です。例：

<td data-order="3120">$3,120/m</td>

これについての詳細 https://datatables.net/manual/data/orthogonal-data

5
azurecorn

数値としてソートするcolumndefでsTypeを数値として定義する必要があります

$('#example').DataTable( {
   "aoColumns": [
      { "sType": "numeric" },
      null,
      null,
      null,
      null
    ],
// define at the place where sorting should by by numeric
// other options goes here
});

//インデックス0の列の上にある列は数値でソートされ、他の列は通常自動検出されます。 aoColumnsの長さは、列の数と同じである必要があります。

1
Sagar Rabadiya