I am trying to combine 2 JavaScript code blocks in in my footer but when I use both it gives an error. How do I combine 2 JavaScript code blocks?
FIRST
$(document).ready(function() {
$('#mydata').DataTable( {
"order": [[ 0, "desc" ]],
scrollY: 400,
scrollCollapse: true,
paging: true
} );
} );
SECOND
$(document).ready(function() {
$('#mydata').DataTable( {
"oLanguage": {
"sUrl": "js/dil/English.json",
}
} );
} );
Error message: DataTables warning: table id=mydata - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
They are just JavaScript initialisation objects. Just combine the objects:
$(document).ready(function() {
$('#mydata').DataTable({
"order": [
[0, "desc"]
],
scrollY: 400,
scrollCollapse: true,
paging: true,
"oLanguage": {
"sUrl": "js/dil/English.json",
}
});
});
This should be working. You need to clearly tell what's the error coming up.
Related
I am trying to refresh the data from my table, but I am not using ajax and that is why when I try to use table.ajax.reload() it is not working.
It gives me wrong json response since the way I am declaring my table is this:
var table = $('.table').DataTable( {
"data": global_data,
"scrollX": true,
"pagination": false,
"lengthChange": false,
"bPaginate": false,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"order": [[ 2, "desc" ]],
});
So in another process I update the variable global_data, how to refresh the data?
Thanks
If you are using datatables you can destroy the data with the following line:
$ ('# mytable'). dataTable (). fnDestroy ();
and fill the table again with the data you want.
var table = $('.table').DataTable( {
"data": global_data,
"scrollX": true,
"pagination": false,
"lengthChange": false,
"bPaginate": false,
"language": {
"url": "http://cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
"order": [[ 2, "desc" ]],
});
i am trying to make cart list of my web. It's working fine in the hosted website but when i download it at home and make it as localhost it give me error.
here is the code line
<script type="text/javascript">
$(document).ready(function() {
$('#widget_tb_purchase').dataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": false,
"info": false,
"autoWidth": false,
"sDom": 'lfrtip',
"scrollCollapse": true,
lengthMenu: [
[ 5 ]
]
});
});
</script>
the spesific line that it said contain error
lengthMenu: [
[ 5 ]
] <<< [this line]
and my computer at work office using window 7 32-bit, at home i'm using window 10 64-bit.
I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?
I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.
fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.
You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.
I have column with String type but it holding the value of time in this format dd-MMM-yyyy HH:mm:ss. When i do sorting its working fine in chrome. But in IE its not working. Please could you help us to resolve this issue?
$(document).ready(function () {
dataTestTable = $('#programListId').DataTable(
{
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bSort": true,
"aaSorting": [[0, "asc"]],
"order": [[12, "desc"]],
"paging": true,
"columnDefs": [
{"targets": 0, "render": $.fn.dataTable.render.ellipsis(12, true)},
],
}
);
testTable = dataTestTable;
}
Below code also not working for Sorting
"columnDefs": [
{"targets": 12, "type":'Date'},
...
]
Been trying to change the Search: to Filter: in my datatable that I created.
I tried this that i found:
$(document).ready(function() {
oTable = $('#datatable-example_filter').dataTable({
"aaSorting": [[ 10, "desc" ]],
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, 250, 500, -1], [25, 50, 100, 250, 500, "All"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Filter: "
}
});
} );
but it is not working, #datatable-example_filter is the name of the id, inside the div that is generated by dataTable
The other answer that uses "oLanguage" is using legacy DataTables api. According to DataTables v 1.10+ documentation, the syntax is:
$('#example').dataTable( {
"language": {
"search": "Filter records:"
}
} );
very easy, just put this parameter when you call data table function:
"oLanguage": {
"sSearch": "<span>YOUR SEARCH TITLE HERE:</span> _INPUT_" //search
}
Inside the Datatable Javascript (table = $dataTable.DataTable) add the following code:
language: {
'search' : '' /*Empty to remove the label*/
}
I left the search empty because I wanted the info to be in the Placeholder
Ps: If you want to add a placeholder put the following code outside the Datatable initialization
$('.dataTables_filter input').attr("placeholder", "Zoeken...");
I have found this code will change the Search Label ( in my case to "Filter results:" before the DataTable get populated with data.
var dataTable_leSrch = $('#dataTable_leSrch').dataTable({
"oLanguage": {
"sSearch": "Filter results:"
}
});
but when I later populate the DataTable with data the label reverted back to "Search:", so I had to add this code to my DataTable configuration to keep the label changed:
function fillDataTable(res) {
if ($('#dataTable_leSrch').length !== 0) {
$('#dataTable_leSrch').DataTable({
fixedHeader: {
header: true,
headerOffset: $('#header').height()
},
oLanguage: {
"sSearch": "Filter results:"
},
responsive: false,
scrollX: true,
scrollY: 400,
scrollCollapse: true,
select: true,
destroy: true,
aaData: res.data.Results,
...
// Input text box will be appended at the end automatically
$(document).ready( function() {
$('#example').dataTable( {
"oLanguage": {
"sSearch": "Filter records:"
}
} );
} );
// Specify where the filter should appear
$(document).ready( function() {
$('#example').dataTable( {
"oLanguage": {
"sSearch": "Apply filter _INPUT_ to table"
}
} );
} );
for more detail check this link http://legacy.datatables.net/usage/i18n
try this for change label search panel
$('#table_id').DataTable({
"oLanguage": {
"sSearch": "type somthing.. ",
},
});