jSon文件转换为JS(jQuery)中的html表,Tablesorter不起作用。我究竟做错了什么?

时间:2015-03-01 23:23:47

标签: jquery json tablesorter

我尝试过很多东西,搜索过的文档,论坛等都没有成功。我正在写一个云文件服务器表的报告(无法运行php)。网页表源自json文件(lint = good)。它包含来自数据库的列数据。包含报告的每个目录的名称与数据库中的每个唯一ID(整数)相同。因此,第一列包含一个超链接,其src和text是一个整数字符串。结果是页面显示标题图标(正确)但不排序。它还会在第一个列标题下显示一个过滤器框,但在另一个列标题中缺少8.我在做错了什么?

// edit- json file is an array of objects ([{"JOBID":"1234567","PROD":"Widget", ...

var thisWeb = "/reports/thisWeb.json";
$.getJSON(thisWeb, function(data) {
    var tbl_head = "";
    $.each(data[0], function(key, value) {
        tbl_head += "<th data-sorter='text'>" + key + "</th>";
        console.log(value);
    });
    $('table thead').html(tbl_head);

    console.log(tbl_head);

    var tbl_body = "";
    $.each(data, function() {
        var tbl_row = "";
        var hlink = "<a href='/reports/" + this.PROD + "/" + this.JOBID + "'>";
        $.each(this, function(key, value) {
            if (key == "JOBID") {tbl_row += "<td>" + hlink + value + "</a></td>";}
            else {tbl_row += "<td>" + value + "</td>";}
        });
        tbl_body += "<tr>" + tbl_row + "</tr>";
    });
    $('table tbody').html(tbl_body);
})
.done(function() {
        // call the tablesorter plugin 
        console.log("tablesorter");
        $("table").tablesorter({ 
            debug: true,
            // initialize zebra striping and filter widgets 
            theme: 'blue',
            widgets: ["zebra", "filter"], 
            widgetOptions : { 
                // external filter (column specific or any match)
                filter_external : '.search',
                // add a default type search to the first name column
                filter_defaultFilter: { 1 : '~{query}' },
                // include column filters
                filter_columnFilters: true,
                filter_placeholder: { search : 'Search...' },
                filter_saveFilters : true,
                filter_reset: '.reset',

            } 
        });
      console.log("filters applied");
})
.fail(function(jqXHR, textStatus, errorThrown) {
      tbl_body = "<tr><td>" + thisWeb + " not found</td></tr>";
      $("table").html(tbl_body);
      console.log('Report list not found ' + textStatus);
});

<main>
<!--      <div id='main'>-->
    <input data-lastsearchtime="1425684650894" class="search" data-column="all" type="search">
    <button type="button" class="reset">Reset Search</button>

<!--    <script> console.log("setting up table"); </script>-->
    <table role="grid" id="objTable" class="tablesorter tablesorter-blue hasFilters" cellspacing="1">
        <thead role="row" class="tablesorter-headerRow"><th aria-label="JOBID: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">JOBID</div></th><th aria-label="PROD: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">PROD</div></th><th aria-label="JOB_TITLE: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">JOB_TITLE</div></th><th aria-label="SOURCE: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">SOURCE</div></th><th aria-label="CHARGE: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">CHARGE</div></th><th aria-label="PRODNAME: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">PRODNAME</div></th><th aria-label="TECH: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">TECH</div></th><th aria-label="LOTID: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">LOTID</div></th><th aria-label="WAFER: No sort applied, activate to apply an ascending sort" aria-sort="none" style="-moz-user-select: none;" unselectable="on" aria-controls="objTable" aria-disabled="false" role="columnheader" scope="col" tabindex="0" class="tablesorter-header tablesorter-headerUnSorted" data-sorter="text"><div class="tablesorter-header-inner">WAFER</div></th><tr role="row" class="tablesorter-filter-row"><td><input data-lastsearchtime="1425684650887" data-column="0" class="tablesorter-filter" placeholder="Search..." type="search"></td></tr></thead>
        <tbody aria-relevant="all" aria-live="polite">
          <tr style="display: table-row;" class="odd" role="row"><td><a href="/reports/widgets/2014544">2014544</a></td><td>widgets</td><td>Return BHD098</td><td>Return</td><td>Acc 12 (DD1.0)</td><td>Widgets Base (Eng)</td><td>RW -Raw</td><td>1124RWSO084.000</td><td>6M03L066SOD1</td></tr>
          <tr style="display: table-row;" class="even" role="row"><td><a href="/reports/widgets/2016457">2016457</a></td><td>widgets</td><td>Test SN100111</td><td>Quality</td><td>Acc 1</td><td>Widegets 2.0 (Eng)</td><td>RW -Raw</td><td>12323SZP002.000</td><td>6L02J184SOG1</td></tr>
       </tbody>
    </table>
</main>

1 个答案:

答案 0 :(得分:0)

Mottie问我输出html哪个开始我的答案 - 标题是一行,TH需要用TR包装。简单回答。它现在可以正确(快速)过滤和排序。

var tbl_head = "<tr>"; // <tr> added
$.each(data[0], function(key, value) {
    tbl_head += "<th data-sorter='text'>" + key + "</th>";
});
tbl_head += "</tr>";   // this line added
$('table thead').html(tbl_head);