Ranking based on other column in a html table
Ranking based on other column in a html table

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
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 !
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).
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
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