1

我正在使用<div>将数据放入每个单元格。

我最近发现jQuery tablesorter并尝试实施它，但没有运气。

我在代码的开头有这个：

$(document).ready(function() 
{ 
    $("#data_fm_op").tablesorter({ sortList: [[0, 0], [1, 0]] }); 
});

我收到一条错误消息：

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1;
Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR
3.5.30729; .NET4.0C; .NET4.0E; InfoPath.3; MS-RTC LM 8) Timestamp: Mon, 24 Jun 2013 16:41:24 UTC

Message: 'config.parsers' is null or not an object Line: 600 Char: 21
Code: 0 URI: file:jquery.tablesorter.js

我正在使用以下函数创建每个单元格：

function addRow(tableID, nbrColumn) 
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    for(i = 0; i < nbrColumn; i++)
    {
        var cell = row.insertCell(i);
        cell.contentEditable = true;
        var element = document.createElement("div");
        element.className = "boxes";
        element.id = tableID + n + "" + i;
        element.contentEditable = true;
        element.style.display = "inline";
        cell.id = tableID + n + "" + i + "cell";
        cell.appendChild(element);
    }
    n++;    
}

此函数用于循环中，当它从数据库中读取数据时会创建一个新行，因此会创建一个新行，然后将所有数据放入每个<div>.

为什么会发生此错误？我该如何解决这个问题？

任何帮助是极大的赞赏！

更新

这是我加载表格的代码：

function loadTables()
{
    loadTbl('fm_op', 'data_fm_op', 15);
    alert("sorter() WILL LOAD NOW");
    $(function sorter() 
    { 
        $("#data_fm_op").trigger("update").trigger("sorton", [[0, 1], [1, 0]]);
    }); 
}

该函数在<body>标签的onload中调用

更新

<TABLE id="data_fm_op" class="table" >
        <thead><tr class="ui-widget-header">
            <th><div id="data_fm_op000" type="text" style="color:#333;text-align:center;">T<span class="ui-icon ui-icon-carat-1-s"></span></div></th>
            <th style="display:none"><div id="data_fm_op001" type="text" style="color:#333;text-align:center">Status</div></th>
            <th><div id="data_fm_op002" type="text" style="color:#333;text-align:center">ID</div></th>
            <th><div id="data_fm_op003" type="text" style="color:#333;text-align:center">System</div></th>
            <th><div id="data_fm_op004" type="text" style="color:#333;text-align:center">Desc</div></th>
            <th><div id="data_fm_op005" type="text" style="color:#333;text-align:center" >Resp</div></th>
            <th><div id="data_fm_op006" type="text" style="color:#333;text-align:center">Hrs</div></th>
            <th><div id="data_fm_op007" type="text" style="color:#333;text-align:center" >Ingr</div></th>
            <th style="display:none"><div id="data_fm_op008" type="text" style="color:#333;text-align:center" >Ini Real</div></th>
            <th><div id="data_fm_op009" type="text" style="color:#333;text-align:center" >Ini</div></th>
            <th style="display:none"><div id="data_fm_op0010" type="text" style="color:#333;text-align:center" >Beta Real</div></th>
            <th><div id="data_fm_op0011" type="text" style="color:#333;text-align:center" >Beta</div></th>
            <th style="display:none"><div id="data_fm_op0012" type="text" style="color:#333;text-align:center" >Prod Real</div></th>
            <th><div id="data_fm_op0013" type="text" style="color:#333;text-align:center" >Prod</div></th>
            <th><div id="data_fm_op0014" type="text" style="color:#333;text-align:center" >Obs</div></th>
        </tr></thead>
        <tbody></tbody>
    </TABLE>
4

2 回答 2

1

我发布作为答案是因为我无法格式化我的评论，但如果它不起作用，我会删除它。

您是否尝试过在 loadTbl 函数之后自行调用更新（见下文）？

function loadTables(){
    loadTbl('fm_op','data_fm_op',15);
    alert("sorter() WILL LOAD NOW");
    $("#data_fm_op").trigger("update").trigger("sorton",[[0,1], [1,0]]);
}

我为你创建了一个小提琴，不确定这是否是你想要的。

于 2013-06-26T19:46:55.033 回答
0

当您动态创建表行时，您需要在添加行后触发其上的“更新”和“排序”事件以使其像这样工作，

  $("#data_fm_op").trigger("update").trigger("sorton",[[0,0], [1,0]]);

查看更多http://tablesorter.com/docs/example-ajax.html

于 2013-06-26T17:22:33.987 回答