How to push variable JavaScript into aodata datatable - javascript
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.
Related
loading gif is not working when binding a json data to jquery datatable
here we are not using any ajax calls just binding a json object to the datatable
below is the code i'm using
$(".loading").show();
$('#myTable').DataTable().destroy();
var dataTable = $('#myTable').DataTable({
data: passeddata,
dom: 'lBfrtip',
buttons: [{ extend: 'excel', text: 'Export to Excel', filename: 'Global Credit Analysis Report' }],
"lengthMenu": [[100, 200, 300, 500], [100, 200, 300, 500]],
deferRender: true,
"scrollY": '60vh',
"scrollX": true,
order: [[6, 'asc']],
columns: [
{ "data": "GFS_x0020_Region","defaultContent": "" },
{ "data": "Focal_x0020_Point_x0020_of_x0020.Title","defaultContent": ""},
{ "data": "Preparer_x0020_Email.Title","defaultContent": ""},
{ "data": "RequesterFullName","defaultContent": "" },
{ "data": "RequestorsOrganization","defaultContent": "" }
]
});
dataTable.columns.adjust();
$(".loading").hide();
there is a complete callback of datatable
$('#myTable').dataTable( {
. . .
"initComplete": function( settings, json ) {
$('.loading').hide();
}
} );
The issue is datatable takes time to load everything, but the code is executed already, so your loading appears and then disappear quickly.
You could use wait or delay but thats not ideal.
column buttons missing from datatables column visibility
We have a datatable that looks like this. As you can see, when you click the column visibility button only a line is appearing:
var dataTableDefaults ={
columnDefs: [
{
"targets": -1,
"orderable": false,
"searchable": false
},
{
"targets": "noSearchOrSort",
"orderable": false,
"searchable": false
},
{
"targets": "noSort",
"orderable": false,
},
{
"targets": "noSearch",
"searchable": false
},
{
"targets": "invisible",
"visible": false
}
],
buttons: [
{
extend : 'colvis',
columns : ":visible"
}
],
order: [[0, 'asc']],
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
language: {
loadingRecords: 'Loading...',
emptyTable: 'No Data available'
},
pagingType: 'full_numbers',
processing: true
};
var cols = [
null,
null,
null,
{ "bVisible" : false }
];
jointDefaults = $.extend(true,{},dataTableDefaults);
jointDefaults.columns = cols
$('#table').DataTable(
$.extend(
jointDefaults,
{
bServerSide: true,
bProcessing: true,
sAjaxSource: 'ajax.php',
fnServerData: function(sSource, aoData, fnCallback) {
aoData.push(
{
name: 'gt',
value: 1
},
{
name: 'mode',
value: pageMode
},
);
$.ajax({
dataType: 'json',
type: 'GET',
url: sSource,
data: aoData,
success: function (response) {
fnCallback(response);
}
});
}
}
)
);
Why are the show/hide buttons on the column visibility not appearing?
How to search in acending order in datatables plugin
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
How could I restore dataTables order from stateSaveCallback with stateLoadCallback?
How could I restore dataTables order from stateSaveCallback with stateLoadCallback? (https://datatables.net/reference/option/stateLoadCallback)
My jsonObject from "backup":
{"time":"1495713075727","start":"0","length":"10","order":[["8","asc"]],"search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"},"columns":[{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"true","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}},{"visible":"false","search":{"search":"","smart":"true","regex":"false","caseInsensitive":"true"}}]}
javascript:
$(document).ready(function() {
//...
$.extend( true, $.fn.dataTable.defaults, {
"fixedHeader": {header:true, headerOffset:34},
"lengthMenu": [[10, 15, 20, 25], [10, 15, 20, 25]],
"autoWidth": true,
"dom": '<"filter"f><"dtToolbar"B>rtilp',
"select": 'single',//true
"responsive": true,
"stateSave": true,
stateLoadCallback: function (settings, callback) {
$.ajax({
"url": "/user_dtable_states/get_dtable_state/" + this.attr("id"),
async: false,
dataType: 'json',
success: function (json) {
callback(json);
}
});
},
"stateSaveCallback": function (settings, data) {
$.ajax({
"url": "/user_dtable_states/save_dtable_state/" + this.attr("id"),
"data": data,
"dataType": "json",
"type": "POST",
"success": function () {}
});
},
"processing": true,
"serverSide": true,
"language": {
select: {
rows: {
_: "(%d sor kijelölve)",
0: ""
}
}
}
});
//...
});
The data table is working, and the order is saving, but the restore from the save not working. What is wrong? Or can you show a working example?
Solved:
"stateSaveCallback": function (settings, data) {
$.ajax({
"url": "/user_dtable_states/get_dtable_state/" + this.attr("id"),
"data": {state: JSON.stringify(data)},
"dataType": "json",
"type": "POST",
"success": function () {}
});
},
How can I combine javascript(s) in web page?
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>