带有ajax的tablesorter刷新不能使用多个

时间:2014-12-31 15:20:29

标签: javascript jquery ajax jquery-ui

我使用的jQueryUI选项卡在每个页面上都有一个表格。表格按Tablesorter 2.0排序。

当我在页面上进行刷新时,以下代码非常有用。如果我添加第二个表w /刷新,只有第一个表更新。有人能告诉我如何通过tableorter对数据进行排序,并使用ajax刷新数据吗?

重新加载是通过这个JS函数运行的:

$(function () {

   $(".tsRefresh").tablesorter({
    headers: {
        '.cbsort': { sorter: 'checkbox' },
        '.nosort': { sorter: false, parser: false }
    },
    theme : 'jui',
    headerTemplate : '{content} {icon}', 
    widgets : ['saveSort', 'uitheme'],
    widgetOptions : {
        zebra   : ["odd", "even"]
    }
});

function getBjson() {

    var Tid = $('.tsRefresh').data('id');
    var Ttable = $('.tsRefresh').data('table');
    var Tbody = $('.tsRefresh').find('tbody').attr('id')
     $.ajax({
        type: "POST",
        url: "ajax.php",
        data: 'table=' + Ttable +'&id=' + Tid,
        success: function(output) {
             document.getElementById(Tbody).innerHTML = output;
             // update tablesorter cache
             $(".tsRefresh").trigger("update");         
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $('#messageResponse').fadeIn(500);
            $('#messageResponse').addClass('ui-state-error ui-corner-all').removeClass('ui-highlight-error');
            $('#messageResponse').text(xhr.status + ' ' + thrownError + ': Something went wrong - check your inputs and try again.');
        }
    });

}

if( $('.tsRefresh').length) {
    var Ttime = $('.tsRefresh').data('time');
    var timer = setInterval(getBjson, Ttime);
    getBjson();
}

});

以下是表格代码:

<div id="tabs-1">
    <fieldset>
    <table width="100%" id="issue" name="issue" class="tsRefresh" data-id="<?=$item_id?>" data-table="eq-load" data-time="10000">
        <thead>
            <tr class="bold">
                <th class="cbsort"><input type="checkbox" class="checkall"> </th>
                <th>OAN/ID</th>
                <th>Category</th>
                <th>Desc</th>
                <th>Issued To</th>
                <th>SN</th>
            </tr>
        </thead>
        <tbody id="container1">         
        </tbody>
    </table>                        
    </fieldset>
</div>          
<div id="tabs-2">
    <fieldset>
    <table width="100%" id="my-load" name="my-load" class="tsRefresh" data-id="<?=$item_id?>" data-table="eq-load-me" data-time="10000">
        <thead>
            <tr class="bold">
                <th class="cbsort"><input type="checkbox" class="checkall"> </th>
                <th>OAN/ID</th>
                <th>Category</th>
                <th>Desc</th>
                <th>Issued To</th>
                <th>SN</th>
            </tr>
        </thead>
        <tbody id="container2">
        </tbody>
    </table>                        
    </fieldset>
</div>

我的PHP脚本(ajax.php)将以下内容输出到tablesorter的表中:

<tr class="dialog-hover" data-table="eq-load-item" data-id="<?=$item_id?>">
    <td align="center"><input type="checkbox" id="row-<?=$item_id?>" value="<?=$item_id?>"></td>
    <td align="center" valign="top"><a href="eq.view.php?id=<?=$item_id?>"><?=$item_oan?>-<?=$item_id?></a></td>
    <td><?=$item_cat?></td>
    <td align="center" valign="top"><?=$item_desc?></td>
    <td align="center" valign="top"><?=$issue_name?></td>
    <td align="center" valign="top"><?=$item_serial?></td>
</tr>

0 个答案:

没有答案