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
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!
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.
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 }
]
});
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.
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
}
]