标签: tablesorter

我有可扩展和可折叠记录的经典表,如果展开显示几个子记录(作为同一父表中的新记录,而不是一些子div /子表).我也在使用tableorter并且非常喜欢它.

问题是tablesorter没有在父记录旁边保留扩展子记录.它将它们分类为顶级.因此,每当表按列排序时,子行最终会遍布整个地方而不是我想要的位置.

有没有人知道对tablesorter或特定配置的良好扩展,使tableorter即使在排序后也能将子行与父行组合在一起？或者我是否必须放弃tableorter以支持其他API或者开始编写我自己的小部件的丑陋过程？我应该避免使用基于CSS的隐藏表的各行来表示折叠行的方法吗？

我最近一直在试验jQuery的tablesorter插件.我已成功完成并运行一次,并给我留下了深刻的印象.但是,我试图将tablesorter应用到不同的表中,只是遇到一些困难......

基本上导致问题的表有一个<ul>上面的表,它充当表的一组选项卡.因此,如果单击其中一个选项卡,则会进行AJAX调用,并重新填充表,其中的行与单击的特定选项卡相关.当页面最初加载时(即在单击选项卡之前),tablesorter功能完全按预期工作.

但是,当单击选项卡并重新填充表时,功能将消失,从而使其不具有可排序功能.即使您返回到原始选项卡,在单击另一个选项卡后,该功能也不会返回 - 唯一的方法是在浏览器中对页面进行物理刷新.

我见过一个解决方案,看起来与我在这个网站上的问题类似,有人推荐使用jQuery插件,livequery.我试过这个但无济于事:-(

如果有人有任何建议我会非常感激.我可以发布代码片段,如果它会有所帮助(虽然我知道tablesorter的实例化代码很好,因为它适用于没有选项卡的表 - 所以它绝对不是那样!)

编辑: 根据要求,这里有一些代码片段:
正在排序的表是<table id="#sortableTable#">..</table>,我正在使用的tablesorter的实例化代码是:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    {
        headers: //disable any headers not worthy of sorting!
        {
            0: { sorter: false },
            5: { sorter: false }
        },
        sortMultiSortKey: 'ctrlKey',
        debug:true,
        widgets: ['zebra']
    }); 
});

我尝试按如下方式安装livequery:

$("#sortableTable").livequery(function(){
   $(this).tablesorter();
});

这虽然没有帮助...我不确定是否应该使用带有livequery的表的id,因为它是<ul>我应该响应的点击,这当然不是表本身的一部分.我已经尝试了一些变化,希望其中一个会有所帮助,但无济于事:-(

是否有一个jQuery插件用于调整与tablesorter一起使用的表列的大小？

我正在使用jQuery Tablesorter,并且解决了对表列应用解析器的问题.我正在添加一个自定义解析器来处理$ -3.33形式的货币.

$.tablesorter.addParser({
    id: "fancyCurrency",
    is: function(s) {
      return /^\$[\-]?[0-9,\.]*$/.test(s);
    },
    format: function(s) {
      s = s.replace(/[$,]/g,'');
      return $.tablesorter.formatFloat( s );
    },
    type: "numeric"
});

问题似乎是内置货币解析器优先于我的自定义解析器.我可以将解析器放在tablesorter代码本身(在货币解析器之前)并且它正常工作,但这不是很容易维护.我无法使用以下方式手动指定分拣机:

headers: {
    3: { sorter: "fancyNumber" },
    11: { sorter: "fancyCurrency" }
}

因为表列是从用户输入动态生成的.我想一个选项是指定分类器用作css类,并使用一些JQuery明确指定一个像这个问题建议的分类器,但我更愿意坚持动态检测,如果可能的话.

我刚开始使用Christian Bach优秀的TableSorter插件,我需要获得列的当前排序方向.我有几个专栏:

• ID
• 名称
• 类别

ID和名称设置为不可排序使用

headers:    { 0: {sorter: false}, 1: {sorter: false} }

我在Name上添加了一个click处理程序,以便它在Category列上触发sort事件.使用示例" 使用表外链接对表进行排序 ",我可以获取Name标题来触发Category排序 - 但它是硬编码的,可以在一个方向排序.

如何让它查看"类别"列当前排序的当前方向,并按相反的方向排序？(我可以处理翻转值;因为排序顺序为0或1,我可以对该值进行异或,以获得相反的结果,比如var sort; sort ^= sort;- 我的问题是如何获取当前值.

这是当前在Name列上设置click处理程序的代码:

$("#nameCol").click(function() {
    var sorting = [[2, 0]];     /* sort 3rd col (Category) descending */
    $("#SearchResults").trigger("sorton", [sorting] );  /* SearchResults is the ID of the sortable table */
    return false;               /* cancel default link action on a#nameCol */
});

谢谢!

为tablesorter编写扩展名虽然是我第一次尝试扩展任何js.我有一些<select>s并且<td>需要知道这个td所在的列.

当在这些选择中的任何一个中改变值时,例如

$('select').change(function(){

});

我需要得到这个选择是列保持坐着的设置col为:

('tr.result > td:nth-child('+col+')').each(function(){

有没有办法可以从td选择中得到这个？!？

- 针对我的具体问题的解决方案是:

$('select').change(function(){

    td  = $(this).parent('td');

    col = $(td).parent().children().index(td);

});

 <div class="table-responsive">
    <table class="table table-hover gradienttable">
        <thead>
            <tr>
                <th>Id</th>
                <th>State</th>
                <th>Sub State</th>
                <th>Title</th>
                <th>Severity</th>                   
                <th>InstanceNum</th>
                <th>CreatedBy</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var incident in Model.GetActiveIncidents())
            {
                <tr>
                    <td><a target="_blank" href=@incident.Url>@incident.Id</a></td>
                    <td>@incident.State</td>
                    <td>@incident.SubState</td>
                    <td>@incident.Title</td>
                    <td>@incident.Severity</td>
                    <td>@incident.InstanceNum</td>
                    <td>@incident.CreatedBy</td>
                </tr>
            }
        </tbody>
    </table>   
</div> 

上面的代码是我将数据填充到表中的方式

如何为twitter bootstrap 3.1.1版本启用此表排序.我在stackoverflow上提到了一个问题并尝试使用它没有工作我怎样才能使表能够使用twitter bootstrap进行排序

有什么建议吗？

对于你们这些人来说这听起来像是一个非常愚蠢的问题,但我向你们保证,我一直在通过互联网查看,我对此没有任何好运.我的问题是:是否可以在tablesorter寻呼机插件中设置初始分页编号？默认情况下,它需要10个选项,但我试图将5作为选定的选项,它仍然加载10.如果我更改它并返回到5,它将按照所述5加载,但不会在开始时加载.

加载tablesorter时有什么选择吗？我对tablesorter的代码是这样的:

$("#TST").tablesorter({
        headers: { 0: { sorter: false }, 4: { sorter: false }, 5: { sorter: false }, 6: { sorter: false} },
        sortList: [[1, 0], [2, 0], [3, 0]],
        widgets: ['zebra']
    })
  .tablesorterPager({
        container: $("#TSTPager"),
        positionFixed: false //,
        //pagesize: 5 
});

我在tablesorterPager中写的pagesize属性是一个测试,但它不能达到我想要的效果.

我有一个表,我通过jQuery加载命令加载.在load函数的回调中,我启动了tablesorter插件.由于某种原因,该表仅对降序进行排序而不是升序.甚至更奇怪,如果我按住shift,它将在asc和desc之间正确切换？知道这里发生了什么吗？

table.php

<table id="xyz">
<thead>
    <tr>
        <th>hi</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
    </tr>
</tbody>
</table>

jQuery的

$("#myDiv").load("table.php", function() {
    $("#xyz").tablesorter();
});

如果我不通过ajax加载表,那么tablesorter按预期运行.

我遇到了一个问题,试图在我的页面上运行一个"加载微调器",该表在一个表被分类时运行,特别是对于较慢的客户端,因为对页面进行排序可能需要10秒钟.我可以看到使用微调器代码修改DOM,但是它不会显示.我希望在排序发生之前我可以做些什么来强制显示微调器,当然也可以在排序完成时停止它.

我的排序基于'sorttable.js',我已经修改它来处理表的第一列的二级排序(其中包含名称).

我的微调器使用'spin.js'.

我仍然是这个jQuery东西的新手,而且这个可排序的代码非常复杂.我突出显示了下面的部分,但我的完整修改后的可排序代码(现在)可以在'sorttable-TESTING-ONLY.js'找到, 并在'TESTING-ONLY-sort_and_spin.htm'上有一个测试html页面.

因此,脚本在页面加载时设置一些函数("......"表示跳过行):

makeSortable: function(table) {                          //line 75
  ......
  headrow = table.tHead.rows[0].cells;

  for (var i=0; i<headrow.length; i++) {                 //line 114
    .....
    headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);   //line 126

    // code to start/stop spinner
    headrow[i].sorttable_spinner = (function(val) {      //line 136
      return function(val) {
        var $this = $(this),
        data = $this.data();

        if (data.spinner) {
          data.spinner.stop();
          delete data.spinner;
        }
        if (val > 0) {
          var opts = {
            .......
           };
           data.spinner = new Spinner($.extend({color: …