Ranking based on other column in a html table
Ranking based on other column in a html table
![tux57](https://secure.gravatar.com/avatar/234fe357477cc911276b76211080d3b5/?default=https%3A%2F%2Fvanillicon.com%2F234fe357477cc911276b76211080d3b5_200.png&rating=g&size=120)
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.
This discussion has been closed.
Answers
Hi @tux57 ,
Yep, this was asked before a while ago, and @kthorngren posted this solution on that thread,
Cheers,
Colin
Thank you for your reply but i like adapt the Javascript Code for a HTML table (not a ajax file)
<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>
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
Thank you for your reply![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
I did that but it does not work --->
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
Or you can use
data()
to set the data value, for example: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 removeapi.rows().invalidate();
.Here is the running example:
http://live.datatables.net/lacenawe/1/edit
Kevin
Nice , thank you , i'm almost there !![:D :D](https://datatables.net/forums/resources/emoji/lol.png)
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).![:'( :'(](https://datatables.net/forums/resources/emoji/cry.png)
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
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() {
// api.rows().invalidate();
}
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
it's work ! very nice![:) :)](https://datatables.net/forums/resources/emoji/smile.png)
Thank you for all.
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 ?
Hi @moik ,
You just need to reverse the sort - so this line
Note : it was
b-a
in the above examples,Cheers,
Colin