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
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 have variable named search_gen. This Variable is generated from ajax(code show below).
var search_gen;
$.ajax({
type: "POST",
url: link+module_name+'search_generator/'+module_active,
dataType: "text",
async: false,
success: function(data){
search_gen = data; //or something similar
}
});
for example this variable will contain a json data(show bellow)
{"name":"room_type_name","value":$("#room_type_name").val()},{"name":"room_type_code","value":$("#room_type_code"
).val()}
if i place json above without using variable it work example code bellow
table=$('#table').dataTable({
"sScrollY": "400px",
"bFilter": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": link+module_name+'populate_list/'+module_active,
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [ {
"targets": 0,
"orderable": false
},
{
"targets": -1,
"orderable": false
} ],
"fnServerParams": function (aoData) {
aoData.push({"name":"room_type_name","value":$("#room_type_name").val()},
{"name":"room_type_code","value":$("#room_type_code").val()})
}
})
and when I'm using variable and put into bracket aodata(seach_gen) (code Below)
table=$('#table').dataTable({
"sScrollY": "400px",
"bFilter": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": link+module_name+'populate_list/'+module_active,
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [ {
"targets": 0,
"orderable": false
},
{
"targets": -1,
"orderable": false
} ],
"fnServerParams": function (aoData) {
aoData.push(search_gen)
}
});
It shows an error like this.
enter image description here
My question is
how do I pass my variable search_gen into aodata.push()
Thank you
I assume you are not waiting for the first AJAX call to complete before calling .dataTable. Try following code:
var search_gen;
$.ajax({
type: "POST",
url: link+module_name+'search_generator/'+module_active,
dataType: "text",
async: false,
success: function(data){
search_gen = data; //or something similar
}
}).done(function( data ) {
table=$('#table').dataTable({
"sScrollY": "400px",
"bFilter": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": link+module_name+'populate_list/'+module_active,
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [ {
"targets": 0,
"orderable": false
},
{
"targets": -1,
"orderable": false
} ],
"fnServerParams": function (aoData) {
//aoData.push(search_gen)
Array.prototype.push.apply(aoData,search_gen); // <<<<<<<<<<<< use this
}
});
});
Alternatively, you can call .dataTable inside success callback of first $.ajax and use data parameter in place of search_gen, like aoData.push(data).
EDIT:
Based on your comment I think search_gen is an array, in which case you will need to use Array.prototype.push.apply(aoData,search_gen); instead of aoData,.push(search_gen);. Check the code above.
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,
]
});
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>