Bootstrap Datatables按部分单元格内容排序

我在排序数据表时遇到问题。我有一个列显示了服务器中的玩家，比如"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

我知道这可能可以通过将两个值分隔到各自的列中来实现，但出于美学原因，我希望它们在同一列中。

这是我的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);
                });
            });
        });

感谢您提供的任何帮助。