Ranking based on other column in a html table

tux57 · June 2018

Hello,

Is it possible to put a ranking in a html table (like the picture) ?

I found the following solution but it's for a ajax objects --->

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": "/ajax/objects.txt",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
          { "data": "rank", defaultContent: ''},
            { "data": "start_date" },
            { "data": "salary" }
        ],
        drawCallback: function () {
          api = this.api();
          var arr = api.columns(3).data()[0];  //get array of column 3 (extn)
          console.log(arr);
          var sorted = arr.slice().sort(function(a,b){return b-a});
          var ranks = arr.slice().map(function(v){ return sorted.indexOf(v)+1 });
          console.log(sorted);
          console.log(ranks);
          // interate through each row
          api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();
            console.log(data.name, data.extn, ranks[arr.indexOf(data.extn)]);
            data.rank = ranks[arr.indexOf(data.extn)];  //set the rank column = the array index of the extn in the ranked array
          } );
        api.rows().invalidate();
      }
    } );
} );

I want adapt this javacode to a html table ------>

    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
    </tr>

it's possible ?

Thank you very much.

colin · June 2018

Hi @tux57 ,

Yep, this was asked before a while ago, and @kthorngren posted this solution on that thread,

Cheers,

Colin

tux57 · June 2018

Thank you for your reply but i like adapt the Javascript Code for a HTML table (not a ajax file)

kthorngren · June 2018

The source of the data shouldn't matter. If you are having trouble please provide a test case with your data and data. You should be able to adapt my example to your data residing in HTML.

Kevin

tux57 · June 2018

Thank you for your reply

I did that but it does not work --->

<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Extn</th>
                        <th>Rank</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>

        <tbody>
        <tr>      
            <td data="name">robert</td>
            <td data="position">metz</td>
            <td data="office">france</td>
            <td data="extn" >5488</td>
            <td data="rank"></td>
            <td data="start_date">2012/08/06</td>
            <td data="salary">5888</td>
        </tr>
        <tr>

            <td data="name">robert</td>
            <td data="position">metz</td>
            <td data="office">france</td>
            <td data="extn" >54854548</td>
            <td data="rank"></td>
            <td data="start_date">2012/07/06</td>
            <td data="salary">5855588</td>
        </tr>
        </tbody>
            </table>
        </div>
    </body>
</html>




**************************************JS**********************************

$(document).ready(function() {
    $('#example').dataTable( {
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
          { "data": "rank", defaultContent: ''},
            { "data": "start_date" },
            { "data": "salary" }
        ],
        drawCallback: function () {
          api = this.api();
          var arr = api.columns(3).data()[0];  //get array of column 3 (extn)
          console.log(arr);
          var sorted = arr.slice().sort(function(a,b){return b-a});
          var ranks = arr.slice().map(function(v){ return sorted.indexOf(v)+1 });
          console.log(sorted);
          console.log(ranks);
          // interate through each row
          api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();
            console.log(data.name, data.extn, ranks[arr.indexOf(data.extn)]);
            data.rank = ranks[arr.indexOf(data.extn)];  //set the rank column = the array index of the extn in the ranked array
          } );
        api.rows().invalidate();
      }
    } );
} );

colin · June 2018

The difference is that you've put the data into the HTML - so you'll need to update the HTML's rank value, see example here.

C

kthorngren · June 2018

Or you can use data() to set the data value, for example:

          api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
            var data = this.data();
            console.log(data.name, data.extn, ranks[arr.indexOf(data.extn)]);
            data.rank = ranks[arr.indexOf(data.extn)];  //set the rank column = the array index of the extn in the ranked array
            this.data(data);
          } );

This will insure that sorting etc will work properly. I think there might be issues with soring in Colin's version.

If you use this.data(data); then you should be able to remove api.rows().invalidate();.

Here is the running example:
http://live.datatables.net/lacenawe/1/edit

Kevin

tux57 · June 2018

Nice , thank you , i'm almost there !

Now, the pagination of the rank works but not the sort of the rank (when I click on the rank tab sort, the ranking does not work).

colin · June 2018

As Kevin pointed out, it doesn't on my one, but the sort is behaving in the example he posted, his last comment. If something isn't working for you, could you post a link to it, please, or make a live example as Kevin and I have been doing.

Cheers,

Colin

tux57 · June 2018

Hello Guys,

Here is an example on my site: agilitypassion.fr/

When i click on the rank tab sort, the ranking does not work.

And this is the JavascriptCode --->

`
$(document).ready(function() {

$('#Tab').dataTable( {     
    dom: 'lpf',
    pagingType: "simple",
    "lengthMenu": [ [1,50, 100, -1], [1,50, 100, "All"] ],
    pageLength: 100,
    "columnDefs": [{ "targets": 7, "orderable": false,} ],   
    "columns": [
    { "data": "rank", defaultContent: ''},
        { "data": "name" },
        { "data": "extn" },
        { "data": "taille" },
        { "data": "poids" },
        { "data": "age" },
        { "data": "gainVitesse" },
        { "data": "favoris" }         
    ],
    drawCallback: function () {
      api = this.api();
      var arr = api.columns(2).data()[0];  //get array of column 3 (extn)
      console.log(arr);
      var sorted = arr.slice().sort(function(a,b){return b-a});
      var ranks = arr.slice().map(function(v){ return sorted.indexOf(v)+1 });
      console.log(sorted);
      console.log(ranks);
      // interate through each row
      api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
        var data = this.data();
        console.log(data.name, data.extn, ranks[arr.indexOf(data.extn)]);
        data.rank = ranks[arr.indexOf(data.extn)];  //set the rank column = the array index of the extn in the ranked array
        //$('#example tbody tr:eq('+rowIdx+') td:eq(4)').html(ranks[arr.indexOf(data.extn)]);
        this.data(data);


          } );

// api.rows().invalidate();
}

} );

colin · June 2018

Hi @tux57 ,

The problem is because you've got a non-numeric bit in your data - "398 sec" - so it was messing up the maths.

I've modified Kevin's last example, using your data, and split()ing the data to get the numeric part to get this.

Cheers,

Colin

tux57 · June 2018

it's work ! very nice
Thank you for all.

moik · May 2019

Hi! I've been looking for the code for years now. Thank you so much.

Is there a way to get the reverse ranking of the "extn" column? The lowest number is the rank #1 ?

colin · May 2019

Hi @moik ,

You just need to reverse the sort - so this line

          var sorted = arr.slice().sort(function(a,b){return a-b});

Note : it was b-a in the above examples,

Cheers,

Colin

Ranking based on other column in a html table

Ranking based on other column in a html table

Answers

Howdy, Stranger!

Categories

DataTables

Ranking based on other column in a html table

Ranking based on other column in a html table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables