We Keep Coding

DataTables in Django modify columns ordering

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();

CSV export always only exports one row

I have a pretty simple datatables object. I bind it to an array of objects, specify the data fields and it works. The problem is when I try to implement the CSV export. It always only wants to export the first row of the table. Any ideas?
Here's where my code stands at the moment. And to be sure, I've made sure that the button and select libraries are included but that has made no difference.
<table id="tblData" style="display:none;">
<thead>
<tr id="trDataTableHeader">
<th data-s-type="string">Name</th>
<th data-s-type="string">Address</th>
<th data-s-type="string">Phone</th>
<th data-s-type="string">Website</th>
<th data-s-type="string">Types</th>
</tr>
</thead>
</table>
...
table = $('#tblData').DataTable({
dom: 'rtB',
data: tableData,
columns: [
{ "data": "name" },
{ "data": "address" },
{
"data": "phone_number",
defaultContent: ""
},
{
"data": "website",
defaultContent: ""
},
{
"data": "types",
defaultContent: ""
},
],
buttons: [{
extend: "csv",
text: "Export",
exportOptions: {
modifier: { search: "none", selected: false}
}
}],
select: false,
lengthChange: false,
sort: false,
paging: false
});

After a lot of digging, I made an accidental discovery when I removed the column data type specifications. I got an error message that str.replace is not a function.
Turns out that the parseInt and parseFloat base functions were being overridden by another developer on that page and was causing a problem but DataTables was too graceful to tell me.
This is why you don't override base javascript functions unless you absolutely have to.

Sorting column with checkboxes

I have a table that I am using jQuery Datatable for.
var myTable = $("#My-Table").DataTable({
"order": [2, "asc"],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [2, 3] }
]
});
Now, the column that I am trying to perform ordering on is a column that contains checkboxes, so on page load I am setting a data attribute for that td element and then ordering by that attribute. The attribute will either be 0 or 1.
#(if item.Active)
{
<td class="active-td" data-order="0">
#Html.DisplayFor(modelItem => item.Active)
</td>
}
else
{
<td class="active-td" data-order="1">
#Html.DisplayFor(modelItem => item.Active)
</td>
}
Now, the user has the ability to deactivate or activate records.. and when they do, I am changing the data-order appropriately... but when I call draw, it is not putting the rows that contain unchecked td elements at the bottom and rows that contain checked td elements at the top like it does on page load.
Here is my jQuery for when a user wants to deactivate.
var td = row.children('td.active-td').attr("data-order", 1); // changing td data attribute accordingly
myTable.cell(myTable.row(row), 2, {order: 'current'})
.data("<input disabled='disabled' class='check-box' type='checkbox' />")
.draw();
The .draw() is not reordering the table like it does on page load.
How do I accomplish this?
Here is what it looks like when I deactive someone:
I want that row to be ordered so that checked checkboxes be at the top, and the unchecked at the bottom.
UPDATE
<script src="https://cdn.datatables.net/plug-ins/1.10.16/sorting/custom-data-source/dom-checkbox.js"></script>
var myTable = $("#My-Table").DataTable({
"columnDefs":[
{
"targets": 2,
"orderDataType": "dom-checkbox"
}],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [2, 3] }
]
});

Avoid using data- attributes for ordering dynamic data, they are good only for static data.
Use dom-checkbox plug-in that allows to sort based on the checked state of checkboxes in a column.
Include appropriate plug-in JS file and use orderDataType option for the column containing checkboxes.
For example:
var myTable = $("#My-Table").DataTable({
// ... skipped ...
"columnDefs": [
{
"targets": 0,
"orderDataType": "dom-checkbox"
}
]
});
See this example for code and demonstration.

jQuery DataTables Ordering By 2 columns

I am using jQuery DataTables to style and give functionality to one of my tables:
My Goal
Order by whether or not the type of funding is active or not.. which is what it is doing currently as you can see. Now, I would like to order the Funding column alphabetically.. so my wanted outcome should be:
Funding One
Funding Two
Funding Three
Funding Four
Alpha
Beta
Charlie
Test
test2
Here is what I have so far my datatables script:
var codeFundingTable = $("#Code-Funding-Table").DataTable({
"bPaginate": false,
"bFilter": false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [2] },
{ "bSearchable": false, "aTargets": [2] }
],
"columns": [
{ "orderData": [1] },
{ "orderData": [0] }
]
});
So I am first ordering by column 1 (Active, 0-based) then by column 0 (Funding) but it is not doing it alphabetically.
How can I make this happen?

It is a guess since we have no sample data. For example, what is the value of "active" (besides a checkbox is rendered)? But I believe you can just do
var table = $('#example').DataTable({
order: [[1, 'asc'], [0, 'asc']]
})
active column is sorted first, if values is 0 and 1 asc should be used
first column is secondly sorted alpha, with respect of second column order
Here is a demo -> http://jsfiddle.net/0f9Ljfjr/949/ position is sorted first, then name is sorted within each position "type".

Try this on for size
"columns": [
{ "orderData": [1,0] },
https://datatables.net/examples/basic_init/multi_col_sort.html

In my case, what helped me is this.
I used data-order attribute to sort my tables.
data-order="[[ 0, "asc" ], [ 1, "asc" ]]

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.