的tablesorter從阿賈克斯

Question

創建表我嘗試檢索的數據來創建表的tablesorter喜歡這裏：

http://mottie.github.io/tablesorter/docs/example-widget-build-table.html（章節：「設置 - 對象（javascript變量）」）

的HTML代碼（簡單DIV）：

<div id="list_user"></div> 

這裏是JS腳本：

jQuery(document).ready(function() { 
    function get_users_list(){ 
     return $.post(
      "/mysql/function_users.php", 
      { 
       'type_request' : 'list_users' 
      }, 
      "json" 
     ); 
    }; 

    get_users_list().done(function(data){ 
     return data; 
    });    
    $(document).ajaxComplete(function(event,request, settings) { 
     if (settings.url == "/mysql/function_users.php") { 
      var dataOject = request.responseText; 
      alert(dataOject); 
      $('#list_user').tablesorter({ 
       debug:true, 
       theme : 'blue', 
       sortList: [[0,0]], 
       widthFixed: false, 
       widgets: ['zebra','filter'], 
       data : dataOject, 
        widgetOptions : { 
         build_objectRowKey : 'rows', 
         build_objectHeaderKey : 'headers', 
         filter_hideEmpty : false 
        } 
      }); 
     }; 
    }); 
}); 

當我檢查什麼是PHP腳本「function_users.php」，我得到以下結構返回：

{ 
    "headers":[ 
     [ 
     "Name", 
     "Surname", 
     "email", 
     "region", 
     "date creation", 
     "last modification", 
     {"text":"","class":"not_sort filter-false toclean"}, 
     {"text":"","class":"not_sort filter-false toclean"}, 
     {"text":"","class":"not_sort filter-false toclean"} 
     ] 
    ], 
    "rows":[ 
     ["toto","toto","toto@toto.com","latam","1410142447","1410142537"], 
     ["tata","tata","tata@tata.com","emea","1410142447","1410142537"], 
     ["titi","titi","titi@titi.com","asia","1410142447","1410142537"], 
     ["tutu","tutu","tutu@tuttu.com","latam","1410142447","1410142537"] 
    ] 
} 

如果您有任何鉛請。謝謝

Answer 1

我對你的問題很感興趣，而且我非常希望將來能夠使用這個tablesorter工具。我已經爲這個問題創建了一些可能的方法。

參見http://jsfiddle.net/terrywbrady/4my61h6d/9/

第一種方法（註釋）從GIST請求數據。

var gisturl =「https://gist.githubusercontent.com/terrywbrady/eb75d9097e633682539e/raw/798bd947404dbcc388fc8954d5d557dec13d0ef7/result.json」;

function get_users_list(){ 
$('#list_user').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra'], 
    widgetOptions: { 
     build_type : 'json', 
     build_source : { 
      url: gisturl,     
      dataType: 'json' 
     } 
    } 
}); 
}; 

第二種方法使用jsfiddle echo服務返回結果。

var DATA = { 
"headers":[ 
    [ 
    "Name", 
    "Surname", 
    "email", 
    "region", 
    "date creation", 
    "last modification", 
    {"text":"","class":"not_sort filter-false toclean"}, 
    {"text":"","class":"not_sort filter-false toclean"}, 
    {"text":"","class":"not_sort filter-false toclean"} 
    ] 
], 
"rows":[ 
    ["toto","toto","toto@toto.com","latam","1410142447","1410142537"], 
    ["tata","tata","tata@tata.com","emea","1410142447","1410142537"], 
    ["titi","titi","titi@titi.com","asia","1410142447","1410142537"], 
    ["tutu","tutu","tutu@tuttu.com","latam","1410142447","1410142537"] 
] 
}; 

var JDATA = { 
    json : JSON.stringify(DATA) 
} 

function get_users_list2(){ 
$('#list_user').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra'], 
    widgetOptions: { 
     build_type : 'json', 
     build_source : { 
      url: "/echo/json/", 
      data: JDATA, 
      contentType: "application/json", 
      type: "POST", 
      dataType: 'json' 
     } 
    } 
}); 
}; 

爲簡單起見，我從表格配置中刪除了幾個顯示選項。