引导数据表按部分单元格内容排序答案

【问题标题】：Bootstrap Datatables Sorting by part of cell contents引导数据表按部分单元格内容排序
【发布时间】：2016-02-25 18:23:43
【问题描述】：

我无法对我的数据表进行排序。我有一列显示服务器中的玩家，例如“0 / 50”，当我尝试对该列进行排序时，它没有正确排序数字。它将按如下顺序显示：

0 / 50
10 / 30
2 / 40
3 / 30
4 / 30
9 / 25

我只想按第一个数字排序。例如：

0 / 50
2 / 40
3 / 30
4 / 30
9 / 25
10 / 30

我知道这可以通过将 2 个值分开到各自的列中来完成，但出于美学原因，我希望它们位于同一列中。

这是我的 HTML 布局：

<div class="row">
    <div class="col-lg-12">
        <table id="serverList" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Server Infomation</th>
                    <th>Players</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

这是我的 Javascript：

$(document).ready(function() {              
            var t = $('#serverList').DataTable();

            $.getJSON('../php/queryAll.php', function(data){
                var server = [];
                $.each( data, function( key, val ) {
                    $.each( val, function( key2, val2 ) {
                        server.push(val2);
                    });
                    String.prototype.replaceAll = function(str1, str2, ignore){return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g,"\\$&"),(ignore?"gi":"g")),(typeof(str2)=="string")?str2.replace(/\$/g,"$$$$"):str2);}
                    if(server[14] > 0)
                    {
                        hostName = server[1].replaceAll('[','<span style="color:#');
                        server[1] = hostName.replaceAll(']',';">');

                        t.row.add( [server[0],server[1],server[8] + ' / ' + server[7]]).draw( false );
                    }
                    server = [];
                });
                $("#loader").fadeOut(250, function(){
                    $(".row").fadeIn(1000);
                });
            });
        });

感谢您提供的任何帮助。

【问题讨论】：

您可以通过仅包含可排序数据（0、2、3 等）的隐藏列来做到这一点。您可以使用columns.orderData 属性指定在单击显示列排序时使用该列进行排序。周围有很多例子，例如stackoverflow.com/questions/30538878/datatables-v1-10-sorting-by-hidden-column

标签： javascript jquery twitter-bootstrap sorting datatables

【解决方案1】：

就像其他人提到的那样，问题在于数据表由于斜线而使用字符串排序。

我解决这个问题的方法是附加一个带有数值的隐藏跨度。您只需要记住使所有值的长度相同，因为它们仍将被排序为字符串。您可以通过附加 0 来做到这一点。

一个例子[假设我知道我的号码永远不会超过 100]：

<td><span style="display:none">024</span>24/60</td>
...
<td><span style="display:none">001</span>1/60</td>
...
<td><span style="display:none">051</span>51/60</td>
...
<td><span style="display:none">033</span>33/60</td>

升序排序，即使是字符串，也会得到 1、24、33、51

如果你也可以在数字后面添加单词，你也可以使用这个技巧：

<td><span style="display:none">050</span>50 Hours</td>

【讨论】：

非常有趣。我有兴趣看看它是否可用于对行进行日期排序，同时包括有关日期的元数据（通过执行类似 YYYY/MM/DD某某某某某某某某某某某某某某某某某某某某某某某某某某某某

【解决方案2】：

您可以使用HTML5 data-* attributes 对数据表进行排序。即 data-order 属性。

<tr>
    <td data-order="0">0 / 50</td>
    [...]
</tr>
<tr>
    <td data-order="10">10 / 30</td>
    [...]
</tr>

【讨论】：

【解决方案3】：

您最初显示的排序顺序是正确的。该列包含一个字符串，排序顺序基于该列中各种字符串的 ASCII 值。

您想要的是数字顺序排序。但是，如果您显示的列包含数值，您最终会得到除法的结果。可能不是你想要的！

您可以按照@markpsmith 的建议对隐藏列进行排序，也可以使用带有或不带有类型检测的 DataTables 排序插件进行探索：

参考：

Sorting Plugins

【讨论】：