DataTables in Django modify columns ordering - javascript

I write Django app, where I have a base.html template and I defined var table where I declared order by column 0 with 'desc' (look below) So I currently use it some templates, where I extend base.html. But now I need to sort in new template firstly by the second column, and after that by the first column (like this: "order": [1, 0, 'desc'] ). I don't know how I modify this variable without a duplicate code. Could somebody help me?
var table = $('#example').dataTable( {
"columnDefs": [ {
"targets": 0,
"searchable": false,
"order": [0, 'desc'],
"ordering": true,
} ]
} );
In template which extends 'base.html'
<script>
//modify order method
</script>

You can set the ordering using .order() then redraw the table:
table.order( [ 1, 'desc' ], [ 0, 'desc' ] ).draw();

Related

jQuery dataTables wrong sorting

I have a problem with jQuery dataTable sorting. It sorts columns in wrong order. For example: I have numbers from 1 to 5, when I click to sort that column it sorts in random order: 4, 1, 3, 5, 2. It's not only with number type. String, date - same problem. I have my data in MySQL database and I get it in json format. My datatable code:
var dataTable = $('#user_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"data_control/orders/fetch.php",
type:"POST"
},
"drawCallback": function( settings ) {
paint();
},
columnDefs: [
{
"orderable": false,
targets: [11, 12, 13, 14]
}
]
});
As I already mentioned - I select my data from database in fetch.php file in JSON format. Any ideas how to solve my problem with sorting?
Thanks!

Datatables Multi Column Sorting

Is there anyway with DataTables to preform a multi-column sort where the secondary column is always sorted DSC irrespective to what sorting direction the primary column is sorted.
{
targets: [ 0 ],
orderData: [ 0, 12 ] //Column 12 needs to always be sorted DSC
}
You could just use orderFixed for sorting like this
$(document).ready( function () {
var table = $('#example').DataTable({
columnDefs: [{
targets: [ 0 ],
orderData: [ 0, 12 ]
}],
orderFixed: [[ 12, "desc" ]]
});
} );
Hope this helps.

Make edit link on datatable with multiple column values and global search on single/custom column(s)

How to create an edit link with function having multiple parameter from the data columns returned from ajax.
I read about the render callback but it only gets one column value & I need 2.
I need something like the following pseudo code.
"columnDefs": [ {
"targets": [0,1],
"data": "0,1",
"render": function ( data, type, full, meta ) {
return ``
}
} ]
As I'm disabling global search on all column except one. I cannot use the above code that use targets property. I don't know how to achieve this, please guide.
Edit: Complete code
var datatable = $('#datatable').DataTable({
"ajax": "/get_data/",
"processing": true,
"serverSide": true,
"deferRender": true,
"columnDefs": [
{ "searchable": false, "targets": [ 0,2,3,4,5,6,7,8,9,10,11 ] }
]
});
You can access row data using full variable, for example full[0] or full[1].
However instead of generating links in HTML, I would retrieve row data in a click handler as shown below:
$('#example').DataTable({
"columnDefs": [
{
"targets": [0, 1],
"render": function ( data, type, full, meta ) {
return 'Edit';
}
}
],
// ... other options ...
});
$('#example').on('click', '.btn-edit', function(){
// Get row data
var data = $('#example').DataTable().row($(this).closest('tr')).data();
edit(data[0], data[1]);
});
I needed Edit link on first column, so I followed #Gyrocode.com answer and it works great.
I also wanted to use the global search for searching but only on one column. Datatable ColumnDef Documentation gave me the clue so I ended up doing as follows.
Here The complete code:
var datatable = $('#datatable').DataTable({
"ajax": "/get_data/",
"processing": true,
"serverSide": true,
"deferRender": true,
"columnDefs": [
{
"targets": 0,
"render": function ( data, type, full, meta ) {
return 'Edit';
}
},
{ targets: 1, searchable: true },
{ targets: '_all', searchable: false }
]
});

Datable sorting by specific column by function argument

I have following js function:
function addDatatable(orderArray) {
$('.Table').dataTable({
"order": [[ 3, "desc" ]],
dom: 'Blfrtip',
"columnDefs": [ {
"targets": 'no-sort',
"orderable": false,
} ],
...
I call this function on many jsp files, but on every page I would like to have another ordering. How I can send into the function specific order?
You could use data-* attributes for each table to define ordering if there are multiple tables and their configuration is the same besides ordering.
<table id="example" class="display" data-order="[[ 3, "desc" ]]" width="100%">
See this example for code and demonstration.

Disable Sorting on every column except the first one

i'm currently using Datatables for a Custom system and i would like to disable Sort for every column but the first one.
I tried with the following code wich is working fine when i add values separated by comma
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1, 2, 3, 4 ] }
],
But my tables column number vary for each individual file so i can have 3 or maybe 12 columns, and i don't want to have to manually add the values for each file.
If i add more values than the columns i have in one file i get the following error, and an execution stop
Uncaught TypeError: Cannot read property 'className' of undefined
So, is there any way i can get those index and pass them to the function?
Thanks!
You can add a specific class to the TH element that you do not want to be sortable.
<table>
<thead>
<th>
...
</th>
<th class="no-sort">
...
</th>
</thead>
<tbody>
...
</tbody>
</table>
And then you can specify this class in your aTargets parameter.
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': ['no-sort'] }
]
View here for more information on the Column specific options.
And then you can specify this class in your aTargets parameter.
columnDefs: [ { orderable: false, targets: [1,2,3,4,5,6,7,8,9] } ]
This worked for me and seems more practical (though not exactly elegant)
columnDefs: [
{
"targets": [0],
"orderable": true
}, {
"targets": [''],
"orderable": false
}
]

Categories