web-dev-qa-db-ja.com

jQuery DataTablesは列データをレンダリングします

JQuery DataTablesを使用して、JSONエンコードされたPHP応答からの情報を表示します。JSON応答にはオブジェクト「名前」が含まれています。「名前」には「フルネーム」、「ラストネーム」、「IDが含まれています「私はcolumnsを使用して思いどおりにデータを表示してきましたが、理解できない問題に遭遇しました。

以下のコードでは、例1は問題なく機能し、「姓」で並べ替えるときに「氏名」が表示されます。ただし、例2はまったく機能しません。必要な出力には、HTMLで表示され、「姓」でソートされた表示が含まれます。例3では、表示は希望どおりにレンダリングされていますが、正しくソートされていません。

誰かが例2を調整して、私が探しているもの（レンダリングおよびソートされたデータ）を出力する方法を知っていますか？

var oTable = $('#table').DataTable({
'ajax': {
    url: 'PHP-file-returns-JSON.php',
    type: "POST",
    dataSrc: function ( data ) {
            return data.cols;
        },       
    data: function(d) {

       ///send additional values to POST
       var frm_data = $('#val1, #val2').serializeArray();
       $.each(frm_data, function(key, val) {
             d[val.name] = val.value;
       });
     }
},
'columns':[

        // exapmle 1 - works but not rendered with HTML
        { data: {
                _:    "name.Full Name",
                sort: "name.Last Name",
                } 
        },

        // example 2 not working at all
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            },
            "sort" : "name.Last Name",
        },

        // example 3 works fine with HTML rendered display but not sorted
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            } 
        },
]
});

更新：

[〜＃〜]ここ[〜＃〜] は、使用しているデータ構造を示すJSFiddleです。実際の例では、姓で並べ替えられた氏名のみが表示されます。ディスプレイにid属性としてIDを持つspan要素を含める方法を理解しようとしています。

jqueryjsonsortingdatatables
5
Austin

あなたが姓で列をソートする必要がある場合、これはうまくいくはずです：

$.extend($.fn.dataTableExt.oSort, {
  "last-name-pre": function(a) {
    return $(a).data("lastname");
  },
  "last-name-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "last-name-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});


$("#example").DataTable({
  "data": data,
  "columns": [{
    "title": "Full Name",
    "data": "Full Name",
    "render": function(data, type, row) {
      return $("<span></span>", {
        "text": data,
        "data-lastname": row["Last Name"]
      }).prop("outerHTML");
    },
    "type": 'last-name'
  }]
});

動作しています こちら 。また、render関数を削除して、last-name氏名を分割して姓を返す関数：

$.extend($.fn.dataTableExt.oSort, {
  "last-name-pre": function(a) {
    return a.split(" ")[1];
  },
  "last-name-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "last-name-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});


$("#example").DataTable({
  "data": data,
  "columns": [{
    "title": "Full Name",
    "data": "Full Name",
    "type": 'last-name'
  }]
});

こちら です。お役に立てば幸いです。お客様の要件を適切に理解できました。

0
annoyingmouse