I'm using a simple table in conjunction with datatable.js.
If I have 6 or 7 columns no problem. The search and paginator align correctly, but with 3 or 4 columns it shows in three columns.
In https://datatables.net/examples/basic_init/dom.html
show how to properly configure this, but I'm using thymeleaf and complains about the syntax
UPDATE 1
I have posted my question in:
https://datatables.net/forums/discussion/45926/dom-in-thymeleaf-html-pages
and this is that post:
Trying to add the code in: https://datatables.net/examples/basic_init/dom.html
in a thymeleaf html page, but it complains about this code:
"dom": '<"top"i>rt<"bottom"flp><"clear">'
I tried to change " by ' and use escape characters but no way.
This script in my html page, doesnt work:
$(document).ready(function() {
$("#mensuales").DataTable({
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
},
"lenghtMenu": [
[5, 12, 15, 20, -1],
[5, 12, 15, 20, "Todos"]
],
"ordering": true,
stateSave: true
});
});
Allan says the code is correct, but I not be able to use in my pages.
UPDATE 2
Any suggestions?
Thanks
Try with:
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$("#mensuales").DataTable({
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
},
"lenghtMenu": [
[5, 12, 15, 20, -1],
[5, 12, 15, 20, "Todos"]
],
"ordering": true,
stateSave: true
});
});
/*]]>*/
</script>
Related
This is a weird one.
I'm using datatables v1.10.19 with jQuery 3.3.1 and Bootstrap 3.3.7
My datatables grid is configured to display 1000 records (but you can change it to 2500, 5000 and "all").
I've only got about 60 records in my database.
It is using Server-Side processing to retrieve data.
When the grid loads, the pager displays 5 buttons plus an ellipses (as if there is even more).
And even weirder, if I change the drop-down to display "all" records, it acts as I would expect i.e. the pager has 1 page button.
The payloads are pretty much identical:
{
"data": {
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here]
},
"outcome": {
"opResult": "Success",
"message": ""
}
}
When you click on page 2, it does successfully retrieve a payload with 0 rows.
But there shouldn't be a page 2 available on the pager.
The config object for the datatable looks like this:
eventsSvr.buildConfig = function (url) {
return {
"processing": true,
"serverSide": true,
//"paging": true,
"ajax": {
url: url,
type: ajax.requestPOST,
dataSrc: 'data.data' // the path in the JSON structure to the array which will be the rows.
},
"order": [[1, "asc"]],
"lengthMenu": [[1000, 2500, 5000, -1], [1000, 2500, 5000, "All"]],
"initComplete": function (settings, json) {
eventsSvr.searchTextSpan.text('Search').removeClass('search-is-on');
},
"columns": eventsSvr.grid.columns,
"columnDefs": eventsSvr.grid.columnDefs,
dom: 'ltp'
};
I do have a bunch of custom searches on the page, so I've had to write a lot of code like this:
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var picker3 = $(eventsSvr.datePickerInputs[0]).data(icapp.kendoKey);
var picker4 = $(eventsSvr.datePickerInputs[1]).data(icapp.kendoKey);
var rowStartDate = moment(data[3], icapp.date.momentParseFormat).toDate();
var rowEndDate = moment(data[4], icapp.date.momentParseFormat).toDate();
... etc.
}
);
But the odd thing is the different behavior as between "All" records vs 1000 records.
As described above, select "All" records works (resulting in just 1 page button), but none of the other paging sizes work (i.e. 1000, 2500, 5000). The data for the 1 page does return, but I get 5 page buttons and an ellipses.
Any ideas why this would be happening?
When using server-side processing mode DataTables expects draw, recordsTotal and recordsFiltered to be root-level elements. Consider changing your repsonse to the following and you can remove dataSrc option.
{
"draw": 8,
"recordsTotal": 86,
"recordsFiltered": 66,
"data": [rows of data here],
"outcome": {
"opResult": "Success",
"message": ""
}
}
Alternatively you can manipulate the response before passing it to DataTables using function supplied as value for dataSrc option, but I would recommend keep things according to expected format for more readable code.
I need to apply custom filtering function in my datatable. For this, I need to set "bFilter": true. But I don't need search box. How can I do that?
var holiday_filter = $('#holiday_table').DataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"order": [[0, 'desc']],
//"aLengthMenu": [5, 10, 20, 30],
'iDisplayLength': 4,
"bAutoWidth": false
});
Use dom option (default value lfrtip) without f which represents filtering input.
For example:
var holiday_filter = $('#holiday_table').DataTable({
// ... skipped ...
'dom': 'lrtip'
});
Im using datatables for displaying data on the webpage. Have also added and Export button which would export the data in Excel format.
Currently im using search() (based on column no. 17) in the javascript to only show specific data in the datatables. On clicking export only the filtered data is being exported. I would want to export the entire data without any filter being applied.
in the view it should only show the rows where column 17 has a specific value 'abc' (Working)
While exporting, it should export entire data i.e column 17 should be having all values as without the search being applied. (Not Working)
Code Snippet:
var table = $('.tableContent').DataTable({
"autoWidth": false,
"pageLength": 50,
dom : 'lBfrtip',
buttons : [ {
extend : 'excel',
text : 'Export to Excel'
} ],
"columnDefs" : [{
"targets" : [ 0, 1, 2, 8, 9, 10, 11, 17, 18 ],
"visible" : true,
"searchable" : true
}, {
"targets" : [ 3, 4, 5, 6, 7, 12, 13, 14, 15, 16, 19, 20, 21 ],
"visible" : false,
"searchable" : false
}]
});
table.column(17).search('abc', false, false, true).draw();
I am using the table plug-in for jQuery (datatables) and want to specify witch colum to sort.
table example:
Name | email | year
My table code so far:
$('#table_id').dataTable({
"stateSave": true,
"aoColumnDefs": [{
'bSortable': false
}],
"oLanguage": {
"oPaginate": {
"sPrevious": "",
"sNext": ""
}
},
"iDisplayLength": 15,
"aLengthMenu": [
[15, 20, 25, -1],
[15, 20, 25, "All"]
],
"responsive": true
});
For the moment it sorts by the name of customer, alltough my sql sorts by year.
How can i overide this in datatable?
SOLUTION
Use order option to set initial order for the table.
$('#example').DataTable({
"order": [ 1, 'asc' ]
});
where 1 is the zero-based index of the column to sort. Use asc for ascending sorting and desc for descending sorting.
DEMO
See this jsFiddle for code and demonstration.
i think this will help you
$(document).ready(function()
{
var oTable = $('#myTable').dataTable();
// Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements
oTable.fnSort( [ [1,'asc'] ] );
// And to sort another column descending (at position 2 in the array (base 0).
oTable.fnSort( [ [2,'desc'] ] );
} );
I need to show the Display number of records in a page by using datatables plugin.
I have included the following js files:
js/jquery.dataTables.js
js/ColVis.js
js/ColumnFilterWidgets.js
js/extras/TableTools/media/js/ZeroClipboard.js
js/media/js/jquery.dataTables.js
js/extras/TableTools/media/js/TableTools.js
and code is like:
oTable = $('#data-table').dataTable( {
"sDom": 'CT<"clear">firtlip',
"oTableTools": {
"sSwfPath": basePath+"/js/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [ {"sExtends": "csv","sFileName" : curpath+".csv","sButtonText": "Save to CSV","mColumns": "visible"} ]
},
"aaSorting": [[0, "desc"]],
"bAutoWidth":false,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"iDisplayLength": 10,
'sPaginationType': 'full_numbers'
} );
But the select box for for selecting the number of records is not displaying.
Please guide me where is the issue.
Thanks in advance.
If you change your css then automatically solve the issue. Just change "display:none" to "display:block" for data-table_length class in css.