Question

我正在尝试使用tablesorter设置表，其中初始排序基于隐藏的输入值。我已经有了这个工作，但我也希望这些列都不合格，特别是那些带有隐藏输入的列，因为用户根据不可见的值进行列排序会很奇怪。

显而易见的解决方案是不要隐藏它，并解决所有问题。但它应该是一个用户可以重新排序然后保存的播放列表，并且为了保持最小化，我想保持隐藏价值。我尝试使用onRenderHeader和headerTemaple手动删除每个类，属性和单击绑定，但这不起作用：

/*...rest of initialization and stuff up here*/
headerTemplate: '{content}',
onRenderHeader: function (index){
    $(this).addClass('sorter-false');
    $(this).addClass('tablesorter-headerUnSorted');
    $(this).css('pointer','default');   
    $(this).removeClass('tablesorter-headerDesc');
    $(this).removeClass('tablesorter-headerAsc');
    $(this).attr('aria-disabled','true');
    $(this).unbind('click');
},

这是jsfiddle：

http://jsfiddle.net/bigheadedmammal/a7Ybw/6/

所以问题：有没有办法在列上设置初始排序，还要将列的排序设置为false？我是否需要创建自定义小部件才能拥有该功能？

编辑：知道了！

我需要设置自定义textExtraction方法。首先，创建变量：

var hiddenExtract = function(node, table, cellIndex){
    return $(node).find("input[name='edit_clip_rank']").val();
}

然后将属性textExtraction添加到初始化：

textExtraction: hiddenExtract

jsfiddle也更新了。希望这能帮助人们走上正轨。我正在查看一组更短的文档，并没有看到这个属性。找到更好的文档： http://mottie.github.io/tablesorter/docs/#textextraction

HTML：

<table id="clipsTable" class="tablesorter">
    <thead>
        <tr>
            <th>Fake order</th>
            <th>Title</th>
            <th>Description</th>
            <th>Buttons</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Title for 1</td>
            <td>Description for 1</td>
            <td>
                <button>Hi guys</button>
                <input type="hidden" name="edit_clip_rank" value="4"/>
            </td>
        </tr>
        ...
    </tbody>
</table>

使用Javascript：

$("#clipsTable").tablesorter({
    headers: {
        0: { sorter: false },
        1: { sorter: false },
        2: { sorter: false },
        3: { sorter: false }
    },
    sortList: [ [3, 0] ],
    textExtraction: {
        3: function(node){
            return $(node).find("input[name='edit_clip_rank']").val();
        }
    }
});

Answer 1

解决方案中有许多过多的，不必要的代码。试试这个（demo）：

HTML

<table id="clipsTable" class="tablesorter">
    <thead>
        <tr>
            <th class="sorter-false">Fake order</th>
            <th class="sorter-false">Title</th>
            <th class="sorter-false">Description</th>
            <th class="sorter-false">Buttons</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Title for 1</td>
            <td>Description for 1</td>
            <td>
                <button>Hi guys</button>
                <input type="hidden" name="edit_clip_rank" value="4"/>
            </td>
        </tr>
        ...
    </tbody>
</table>

脚本

$("#clipsTable").tablesorter({
    sortList: [ [3, 0] ],
    textExtraction: {
        3: function(node){
            return $(node).find('input[name]').val();
        }
    }
});

如果您使用textAttribute option而不是隐藏的输入，请为该表格单元格demo添加data-text属性：

<td data-text="4">
    <button>Hi guys</button>
</td>

并使用此脚本：

$("#clipsTable").tablesorter({
    sortList: [ [3, 0] ]
});

使用自定义解析器进行Tablesorter初始排序，并关闭排序器的所有列

1 个答案: