I am using DataTables jquery plugin to make my tables sortable. I need to rearrange columns after the table is created to make it look more logical, but after that it still does sort, but the result looks random. I can't get it to work, although (at least I think so) I am initiating datatable after the rearrangement.
function initTable() {
$('tr').each(function () {
$('td:last', this).remove().insertAfter($('td:first', this));
});
var table = $('#dashTable').dataTable({
"paging": false,
"ordering": true,
"info": true,
"order": [[0, "asc"]]
});
fixHeader(table);
}
If I don't call $('tr').each everything works as expected.
If you need to reorder the columns after the dataTable is initialized, then I strongly recommend you are using the ColReorder plugin.
var table = $('#dashTable').dataTable({
...
colReorder: {
order: [1, 5, 2, 3, 4] //alternative order
}
});
If you just want to reorder the table columns before dataTables is initialized, then be sure to avoid asynchronicity traps by using a callback. As your code is constructed dataTable({..}) is likely to be executed before the each() loop has finished :
var table;
function initTable() {
function reorder(callback) {
//good idea to include header titles when reordering
$('thead tr').each(function () {
$('th:last', this).remove().insertAfter($('th:first', this));
})
var len = $('tbody tr').length;
$('tbody tr').each(function () {
$('td:last', this).remove().insertAfter($('td:first', this));
if (!--len) callback();
})
}
reorder(function() {
table = $('#dashTable').dataTable({
"paging": false,
"ordering": true,
"info": true,
"order": [[0, "asc"]]
});
//fixHeader(table); guess this is the <th> reordering
})
}
Related
I have an element that opens a modal:
<a style="color:#5cb85c" data-toggle="modal" data-target="#CallModal" data-id="#item.Supplier.Id" href="#CallModal" class="fas fa-phone-square"></a>
I have a Javascript listener on data-toggle=modal that passes the data-id into a field of id="CallSupplier" in the modal.
$(document).ready(function () {
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#CallSupplier').val(data_id);
})
});
That all works great. but, I also have Datatables. Everything works great until i interact with Datatables via searching or pagination, and then the javascript for filling the modal stops working/firing.
Here is the full script element on my page. I'm thinking it has something to do with how I'm defining my JS functions:
<script type="text/javascript">
$(document).ready(function () {
$('#SupplierTable').dataTable({
searching: true,
lengthChange: false,
info: false,
pagingType: "first_last_numbers",
order: [2, 'desc'],
pageLength: 5,
dom: 'Bfrtip',
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
"columnDefs": [{ "type": "date", "targets": 2 }]
});
});
//map the data-id fields to the objects
$(document).ready(function () {
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#AttachmentSupplier').val(data_id);
$('#CallSupplier').val(data_id);
$('#CommentSupplier').val(data_id);
})
});
</script>
I found a very similar post that lead to me answering this.
Function stops working after table sort
I removed $(document).ready() from my function, and now it continues to work even after sorting or paging in Datatables.
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var data_id = '';
if (typeof $(this).data('id') !== 'undefined') {
data_id = $(this).data('id');
}
$('#AttachmentSupplier').val(data_id);
$('#CallSupplier').val(data_id);
$('#CommentSupplier').val(data_id);
})
I have a DataTable where I need to insert/append data dynamically from an AJAX call. Searching and Sorting on this kind of DataTable does not seem to work as intended. Here is my JSFiddle
Code:
$('#example').DataTable( {
"iDisplayLength": 10,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaData": md,
"aaSorting": [[1, 'asc']],
"createdRow": function (row, data, index) {
$('td', row).eq(0).append('<u><a target="_blank" href="' + data["Data"][0].Link + '">' + data["Data"][0].Value + '</a></u>');
$('td', row).eq(1).append(data["Data"][1].Value);
$('td', row).eq(1).prop('title', data["Data"][1].Value);
for (var i = 2; i < data["Data"].length; i++) {
if (data["Data"][i].Value == "green") {
$('td', row).eq(i).addClass('highlight1');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else if (data["Data"][i].Value == "red") {
$('td', row).eq(i).addClass('highlight3');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else if (data["Data"][i].Value == "blue") {
$('td', row).eq(i).addClass('highlight2');
$('td', row).eq(i).append(data["Data"][i].Value);
}
else{
$('td', row).eq(i).append(data["Data"][i].Value);
}
}
},
"scrollX": true,
"scrollCollapse": true,
"fixedColumns": {
"leftColumns": 2,
},
"sScrollXInner": "150%",
"fixedHeader": true,
"columnDefs": [{
"defaultContent": "",
"targets": "_all",
"data": null,
"render": {
// "_":spData[0].Cells[2].Value,
}
}],
} );
Any Solutions or ideas to this issue?
I do not believe createdRow is doing what you intend. According to the DataTables documentation:
This callback is executed when a TR element is created (and all TD child elements have been inserted), or registered if using a DOM source, allowing manipulation of the TR element.
Your <td> child elements are being rendered by createdRow and the searching and sorting features are not aware of their existence.
You should, instead, use row.add() if you want to add your rows after DataTable() has initialized. More information on it can be found in the DataTable doucmentation. But here is an updated JSFiddle based on your original link using row.add() to add your rows to the table, allowing the searching and sorting to now work on them.
When I delete the line “paginate”: false inside of the javascript box,
the Fixedheader doesn’t work anymore but I don’t want pagination. Is there any way to avoid this?
Here's the code: http://jsfiddle.net/xF8hZ/128/
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false
"paginate": false
} );
new $.fn.dataTable.FixedHeader( table, { "left": true } );
$('.filterName').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).data('filter');
table.column(0).data().search(filterValue).draw();
});
} );
I assume you meant to say
When I put the line “paginate”: false inside of the javascript box...
That's because you missed a comma there, should look like this:
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false,
"paginate": false
} );
I can't get my pagination to work after I added a date filtering plug-in to datatables.
The original code was like this and it was picking up the pagination fine.
$(document).ready(function() {
$('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
this is my current one with the plug in variables
$(document).ready(function() {
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});
Thanks in advance.
Well, in your current function, this part:
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
should be written like this:
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
Edit
In case it wasn't clear, the full jQuery code should look like this:
$(document).ready(function() {
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});
I am trying to succeed at getting this jquery plugin to work corretly. What I need is a click event that will alow me to click a row and have a js window that will load another page using the row_id that is the primary key in the database. I'm really lost with javascript but I like the plugin and really would like to have this work if possible. I have been at this for a couple of days now. I know I'm close but haven't hit the mark yet. If someone could please help me, I'd be really grateful. I am using json to import the data.
Here is my current code. It will compile now but the .click event won't fire. :/
$(document).ready(function() {
oTable = $('#search').dataTable(
{
"sPaginationType": "full_numbers",
"bProcessing": true,
"iDisplayLength": 15,
"sAjaxSource": 'json.php',
"fnInitCallback": function ()
{
$(oTable.fnGetNodes() ).click(function ()
{
//alert();
});
}
});
});
You need to replace fnInitCallBack with fnInitComplete and it will work.
oTable = $('#search').dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"iDisplayLength": 15,
"sAjaxSource": 'json.php',
"fnInitComplete": function (){
$(oTable.fnGetNodes()).click(function (){
// my js window....
});
}
});