Question

我正在使用<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>

Answer 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]]);
}

我为你创建了一个Fiddle，不确定这是不是你想要的。

Answer 2

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

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

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

使用jQuery Tablesorter和单元格中的div不起作用

2 个答案: