CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapsortingdatatables
Lou
Lou

Reputation: 41

Bootstrap Datatables Sorting by part of cell contents

I am having trouble sorting my Datatable. I have a column that shows players in a server like this "0 / 50", when I try to sort that column it doesn't sort the numbers properly. It will show in order like this:

I would like to sort by only the first number. For example:

I know this could probably be done by just separating the 2 values in to their own column, but for aesthetic reasons I would like them to be in the same column.

Here is my HTML Layout:

<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>

Here is my 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);
                });
            });
        });

Thanks for any help you can provide.

Upvotes: 4

Views: 1852

Answers (3)

Syd
Syd

Reputation: 79

You can sort a Datatable using HTML5 data-* attributes. Namely, the data-order attribute.

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

Upvotes: 2

scottysmalls
scottysmalls

Reputation: 1251

Like others have mentioned, the problem is that datatables is using string sorting because of the slash.

The way i get around this is by appending a hidden span with the numerical value. You just have to remember to make all the values of same length since they will still be sorted as strings. You can do this by appending 0's.

An example [assuming i know that my number will never be over 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>

An ascending sort, even as a string, will result in 1, 24, 33, 51

You can use this trick if you add words after a number as well:

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

Upvotes: 3

Karl
Karl

Reputation: 1854

The sort order is correct as you initially show it. The column contains a string and the sort order is based on the ASCII value of the various strings in the column.

What you want is a numeric order sort. However, if the column as you show it, contained numeric values, you would end up with the results of the division. Probably not what you want!

You can sort on a hidden column as @markpsmith suggested or you can also explore using a DataTables sorting plugin with or without type detection:

Reference:

Sorting Plugins

Upvotes: 0

Related Questions