web-dev-qa-db-ja.com

jQuery DataTablesを取得して非表示の値でソートし、表示された値で検索するにはどうすればよいですか？

日付列を含む単純なDataTablesグリッドがあります。 JSONデータセットの日付に2つの値を提供しました。1つは表示用で、もう1つはDataTablesでソートできるように特別に設計されています。私のWebアプリケーションでは、ユーザーがさまざまな日付形式を選択できるため、柔軟性が必要です。

これは、DataTablesがsAjaxSource経由でWebサーバーから取得するJSONデータです。

_{
  Reports : [
    { Date: { Sort = "20101131133000", Display : "11/31/2010 1:30 PM" } }, 
    { Date: { Sort = "20100912120000", Display : "1200 EST 2010-09-12" } }, 
  ]
}
_

DataTablesに_Date.SortValue_プロパティに基づいてソートし、fnRender()を使用してDisplayプロパティをユーザーに表示するように指示するのは簡単です。だから、これは私の目標の半分に到達します。

_var dataTableConfig = {
  sAjaxSource: "/getreports",
  sAjaxDataProp: "Reports",
  aoColumns: [
    { mDataProp: "User" },
    { mDataProp: "Date.Sort", 
      bSortable: true, 
      sName: "Date", 
      bUseRendered: false, 
      fnRender: function (oObj) {
        return oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].sName].Display;
      }
    }
  ]
};
_

これが私の問題です。ユーザーがフィルターを入力できるようにしたい（DataTablesが提供する組み込みフィルター入力を使用して） ）表示された値に基づいていますが、できません。

例えば。ユーザーが「EST」と入力した場合、データテーブルはmDataPropから返された値ではなくfnRenderで指定された値に基づいてフィルタリングするため、結果はゼロになります。

日付列を並べ替えてフィルタリングする方法を誰でも教えてもらえますか？ありがとう。

jqueryjquery-pluginsdatatables
34
jessegavin

これは古い投稿ですが、ここに来る他の人の助けになることを願っています。

DataTablesの最新バージョンでは、bUseRenderedおよびfnRenderは非推奨です。

mRender は、この種のことを行う新しい方法であり、少し異なるアプローチがあります。

次のような方法で問題を解決できます。

...
{ mDataProp: "Date.Sort"
  bSortable: true, 
  sName: "Date", 
  // this will return the Display value for everything
  // except for when it's used for sorting,
  // which then it will use the Sort value
  mRender: function (data, type, full) {
    if(type == 'sort') return data.Sort;
    return data.Display
  }
}
...
18
CWSpear

DataTablesの更新により、既存の回答は非推奨になると思います。 HTML5は、列を簡単にソートするためにDataTablesが使用できる属性をサポートしています。具体的には、data-sort属性。 （ https://datatables.net/examples/advanced_init/html5-data-attributes.html を参照）

次のようにテーブルを簡単にソートできます。

<table>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td data-sort="37">2/1/78 (37 years old)</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td data-sort="35">12/1/80 (35 years old)</td>
    </tr>
  </tbody>
</table>

「年齢」列に数字、記号、文字が含まれていても問題ありません。DataTablesは「data-sort」属性を使用して並べ替えます。

66
Aaron C. de Bruyn

少し異なるアプローチを試してください。

テーブルに両方の列を配置し（DateDisplayとDateSortと呼びます）、レンダリング関数を使用せず、DateSort列を非表示にします。次に、DateDisplay列のaoColumns配列に{ "iDataSort": 2 }、ここで2はDateSort列のインデックスです。

この場合、DateDisplay列は元のデータに表示され、フィルターはこの列によって実行されますが、ソートはDateSort列の値によって実行されます。

データテーブルサイトまたは http://www.codeproject.com/KB/scripting/JQuery-DataTables.aspx セクション「並べ替えの構成」にiDataSortプロパティの詳細があります。

20
Jovan MSFT

うーん...このリマロールのすべてを実行する代わりに、「Sort By」で隠しspanを前面に追加するだけです。

<td><span style="display:none;">20101131133000</span>11/31/2010 1:30 PM</td>

注：これは、隠された値または表示された値のいずれかで検索できることを意味します...これは、一緒に暮らすことができない結果になる可能性があります。

14
Serj Sagan

+1 JocaPC

Javascriptがゼロインデックス配列を利用していることを全員に思い出させることで、JocaPCの答えに追加したいと思います。

例：

 HiddenSortString（0）|日付（1）|一部のテキスト（2）
 ........................................ ........................... 
 1349035566 | 2012年9月30日午後2時6分|何とか
 1349118137 | 2012年10月1日午後1時2分|なんとか
 1349371297 | 2012年10月4日午前11時21分|何とか
 ........................................... ........................

非表示の文字列を使用して日付フィールドをソートするには、次を使用します。

$('.mytable').dataTable({
    "aoColumns": [{"bVisible": false},{"iDataSort": 0},null]
});
11
Brian

データは既にソートおよび表示可能な形式になっているため、これが必要なすべてのコードです。

Date.Sortを並べ替えに使用し、Date.Displayをビジュアルに使用します。これは文書化されています here 。

columns: [{
    data: 'Date',
    render: {
        _:   'Display',
        sort: 'Sort'
    }
}]
3
Martin Wickman

Ajaxデータソースを使用している場合は、直交データを使用できます。たとえば、ajax応答では、表示値と並べ替え値を持つオブジェクトとして列の1つを返します（OPの動作と同様）。

_{
   "data":[
      {
         "customer":"JOHN DOE",
         "rating":{
            "display": "★★★",
            "sort":"3"
         },
      },
      {
         "customer":"BILLY NOAH",
         "rating":{
            "display": "★★★★★",
            "sort":"5"
         },
      }
   ]
}
_

テーブルオプションで、次のようにcolumns()を使用できます。

_"columns" : [
   {
      "data":"customer"
   },
   {
      "data":"rating",
      "render":{
         "_":"display",
         "sort":"sort"
      }
   }
]
_
1
billynoah

非表示列（ソート）で列をソートする必要があります。これには、並べ替えデータを含む列を含め、列を非表示にし、表示列を非表示列で並べ替える必要があります。

   "aoColumnDefs:[
    {"sTitle": "Display", "iDataSort":1, "aTargets":[2]},
    {"bVisible": false, "aTargets":[2]}
    ], 

aoColumns: [
    { mData: "User" },
    { mData: "Display"},
    { mData: "Sort"}
  ]
0
user3114969