I have a website with the following:
...
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js"></script>
I need to combine these scripts into one:
<script>$(document).ready(function() {$('#cccr').DataTable( { "order": [[ 0, "desc" ], [2,"asc"], [1,"asc"]], "aaSorting": [], "bPaginate": false, "bLengthChange": true, "bFilter": true, "bSort": true, "bInfo": true, "sPaginationType": "full_numbers", "sScrollY": "25rem", "bStateSave": false, "autoWidth": true });} );</script>
<script>$(document).ready(function() {var oTable = $('#cccr').dataTable();oTable.fnFilter( 'parry' );} );</script>
<script>$(document).ready(function() {new $.fn.dataTable.Responsive( table );} );</script>
Problem is that I want the page to be responsive and having the responsive js invocation code separate screws everything up. How can I safely combine these lines? (Preferably w/o "$(document).ready".
like this
<script>
$(document).ready(function() {
$('#cccr').DataTable({
"order": [
[0, "desc"],
[2, "asc"],
[1, "asc"]
],
"aaSorting": [],
"bPaginate": false,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"sPaginationType": "full_numbers",
"sScrollY": "25rem",
"bStateSave": false,
"autoWidth": true
});
var oTable = $('#cccr').dataTable();
oTable.fnFilter('parry');
new $.fn.dataTable.Responsive(table);
});
</script>
Related
When i select first record in first page and select 2nd record in second page and moving back to first page it will disappear the checkbox, and same things happen in select all page also please help me on this.
please find the attached screenshot
var oTable = $('#crm_index_table').dataTable( {
bProcessing: true,
sPaginationType: "full_numbers",
bServerSide: true,
"bStateSave": true,
'checkboxes': {
'selectRow': true
},
"aoColumnDefs": [
{ "bSearchable": false, "aTargets": [-3, -2, -1 ] },
{ "bSortable": false, "aTargets": [-8, -3, -1] }
],
"oLanguage": {
"sLengthMenu": "Show _MENU_ records"
},
sAjaxSource: $('#crm_index_table').data("source"),
"fnDrawCallback": function(nRow, aData) {
$('#check_all').click(function(e) {
$(".selectable_candidate").prop('checked', $(this).prop('checked'));
});
I have 2 tabs in my laravel project. I want to export my datatable to excel.
First datatable id is #listRepairOut, and the second is #listRepair.
I have successfully export the datatables to excel. But the problem is, my datatable in the last tab is broken. The table header is moving, so it seems not good.
Here I attach the views:
And this is my javascript that I used to export datatables:
$(document).ready(function () {
$('#listRepairOut').DataTable({
scrollX: true,
scrollCollapse: true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
dom: 'Bfrtip',
buttons: [
'excel'
],
});
$(document).ready(function () {
$('#listRepair').DataTable({
scrollX: true,
scrollCollapse: true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
dom: 'Bfrtip',
buttons: [
'excel'
],
});
});
$('.nav-tabs a:last').click(function () {
$(this).tab('show');
$('#listRepairOut').DataTable().draw();
})
What should I do to fix this broken datatable? I want to fix the second table like the first table. Please help me
I am using datatables plugin to show the data and the data is displaying in descending order by default. But when i am going to search it gives the result in asceding order and disturbed the display order of data as it gives the result in ascending order.
Thanks in advance
var dTable = $('.MemberListTable').DataTable({
"paging": true,
"bSortable": false,
"lengthChange": true,
"bRetrieve": true,
"bProcessing": true,
"bDestroy": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
// "responsive": true,
"aLengthMenu": [[25, 50, 75], [25, 50, 75]]
});
dTable.order([[6, 'asc']]).draw();
var dTable = $('.MemberListTable').DataTable({
"paging": true,
"bSortable": false,
"lengthChange": true,
"bRetrieve": true,
"bProcessing": true,
"bDestroy": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"order" : [[columnNumber(in your case it is 6) , 'asc']],
// "responsive": true,
"aLengthMenu": [[25, 50, 75], [25, 50, 75]]
});
It will make it by default in ascending order.
If you want results in descending order than add this in your searching logic:
dTable.order([[columnNumber, 'desc']]).draw();
Actually , I really don't understand what you are asking.
If helpful , you are welcome in advance.
Otherwise, you should see this.
https://datatables.net/forums/discussion/26765/change-sort-order-after-search#Comment_72992
I am using DataTable and Search with below code
$(document).ready(function () {
var userTable = $('#result').dataTable({
"aaSorting": [],
"bInfo": true,
"oSearch": {"sSearch": ""},
"bAutoWidth": false,
"bLengthChange": false,
"bPaginate": false,
"scrollX": true,
"aoColumns": [
null,
null,
null,
null,
null,
]
});
$('#user-search').keyup(userTable, function(){
console.log($(this).val());
});
userTable.fnFilter($(this).val());
$(".dataTables_filter").hide();
});
But my search gives result for id and class also
example if I search 28, it gives result for id=28
or if I search for "green" it gives row with class=green.
In order to remove this id, class, commented code etc what to do ?
I didn't understand well your question, but if you want to exclude table columns from the global search you can do that with { "bSearchable": false }, so for example if idand classcolumns are the first and second ones, you should do:
var userTable = $('#result').dataTable({
"aaSorting": [],
"bInfo": true,
"oSearch": {"sSearch": ""},
"bAutoWidth": false,
"bLengthChange": false,
"bPaginate": false,
"scrollX": true,
"aoColumns": [
{ "bSearchable": false },
{ "bSearchable": false },
null,
null,
null,
]
});
When I resize the header, the body also resizes a bit, but incorrectly. For example:
The grid is initialized as below:
var oTable = $('#grid').dataTable( {
dom: 'Rlfrtip',
"scrollX": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": true,
"bInfo": false,
"bAutoWidth": false
});
I'm using the ColReorderWithResize.js v.1.0.7
Any ideas?
try to give fixed width like this:
aoColumns: [
{ "sWidth": "50px" },
{ "sWidth": "150px" },
{ "sWidth": "50px" },
{ "sWidth": "50px" },
{ "sWidth": "50px" }
]