Question

我尝试检索数据以创建一个包含tablesorter的表，如下所示：

http://mottie.github.io/tablesorter/docs/example-widget-build-table.html（部分：＆＃34;设置 - 对象（javascript变量）＆＃34;）

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脚本＆＃34; function_users.php＆＃34;的返回内容时，我得到以下结构：

{   
    "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 =＆＃34; https://gist.githubusercontent.com/terrywbrady/eb75d9097e633682539e/raw/798bd947404dbcc388fc8954d5d557dec13d0ef7/result.json＆＃34 ;;

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'
        }
    }
});
};

为简单起见，我从表格配置中删除了一些显示选项。

tablesorter从ajax创建表

1 个答案: