i am trying to create a filter function from my datatables, how can i post the value that i want coming from the javascript to php using the datatables function?
here is my sample code from my datatables
var oTable = $('#datatables').DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": base_url + "link",
"fnServerParams": function (data) {
data.filter_start_date = $('#filter_start_date').val();
console.log(data);
},
dom: 'lBfrtip',
buttons: [
'excel'
],
"lengthMenu": [[10, 20, 50, 100, 300, -1], [10, 20, 50, 100, 300, "All"]],
"pagingType": "full_numbers",
"language": {
"paginate": {
"previous": 'Prev',
"next": 'Next',
}
},
"bAutoWidth": false,
"aaSorting": [[ 0, "desc" ]],
});
and the data.filter_start_date value is i want it to be post from my php. thank you in advance, i am just really stuck with this problem or am i just doing it wrong.
On php you will get a param filter_start_date which will be sent on every datatables ajax request. Just use it to filter your results.
And in javascript you can do something like this to reload the table
$('#filter_start_date').change(function() {
oTable.ajax.reload();
});
EDIT:
Here's exactly how I use it:
$('#table').DataTable({
//configs
ajax: {
url: baseUrl('/ajax/load-docs'),
type: 'post',
data: function(d) {
d.initial_date = $('#initial_date').val();
}
}
});
and in php
$date = $this->getParam('initial_date'); //getParam from Zend_Framework Controller
in your case you can use $_POST['filter_start_date']
Related
I am using jQuery DataTables and it's working well. I just want to show a text message while the table is being initialized.
I am not using server side.
How can I do it?
$(document).ready(function() {
$(".table").DataTable({
"bFilter": true,
"lengthMenu": [ 10, 25, 50, 75, 100, 150, 200, 500, 1000 ],
"columnDefs": [{ targets: 'no-sort', orderable: false }],
"pageLength": 50,
"language": {
"processing": "Loading..."
},
"initComplete": () => {
$(".table").show();
}
});
});
I tried with preinit but no luck, and I also do not want to keep displaying the html if there is no request for datatables, something like beforesend.
I would like to access the dropdown list for length display of the jQuery Datatable before the data is loaded in the table, i have a problem that whenever the user select the lenght of records to display in the table , the table resize and trigger window.resize() and i want to access the dropdown list after the table initialization but before the data is loaded, here is what i trying to do but it doesn't work.
let table = $('#data-table').DataTable();
$(document).on('preInit.dt', function (e, settings)
{
$('select[name=data-table_length]').click(function ()
{
console.log('dropdown selected');
window_resize = false;
});
});
table = $('#data-table').DataTable({
destroy: true,
serverSide: false,
autoWidth: false,
paging: true,
order: [[1, 'asc']],
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
ajax: {
url: '/Observer/GetActiveClientsByProfileId',
type: 'POST',
data: {
ProfileId: profileId
},
dataSrc: ''
},
columns: [
{
title: 'Zone',
data: 'LastKnownZone',
},
{
]
});
$("input[type='checkbox']").on("change",function(){
if($(this).is(":checked")){
$.ajax({
url: portfolio_data_url,
type: 'POST',
data: "id="+$(this).val(),
success:function(r){
// succcess call
}
})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
<div><input type="checkbox" value="0" checked>All</div>
<div><input type="checkbox" value="1">AppID</div>
<div><input type="checkbox" value="2">Vendor</div>
</form>
I have several checkboxes whose values are passed using a POST request. If one checkbox is selected, the value is passed to the POST request.
But I already have code that passes POST requests:
list.js
$(function () {
var table = $("#portfolio").DataTable({
"ajax": {
"url": portfolio_data_url,
"type": "POST"
},
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"stateSave": true,
"processing": true,
"serverSide": true,
"deferRender": true,
"language": datatables_language,
"order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],
"columnDefs": [
{
"searchable": false,
"orderable": false,
"targets": "no-sort"
}
]
})
});
How can I integrate the code into the list.js for everything to go with one query.
Because now two different requests are sent which lead to incorrect output of information.
You can use .DataTable function to send checkboxes checked value in one request like below:
Try this:
$(function () {
var table = $("#portfolio").DataTable({
"ajax": {
"url": portfolio_data_url,
"type": "POST",
"data": function(d){
var ids = $('input:checkbox:checked').map(function(){
return this.value;
}).get();
d.ids = ids;
}
},
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"stateSave": true,
"processing": true,
"serverSide": true,
"deferRender": true,
"language": datatables_language,
"order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],
"columnDefs": [
{
"searchable": false,
"orderable": false,
"targets": "no-sort"
}
]
})
});
In Datatable Using the data parameter as a function allows the additional data to send to server
Official Documentation
Note: You will get checked checkboxes value as an array, You can use .join(',') after .get() to send values as comma separated string to use directly in query
Also, when user check any checkbox then we can refresh datatable ajax to send updated checked checkboxes like below:
$("input[type='checkbox']").on("change",function(){
table.ajax.reload();
});
It looks like the ajax function youy want to re-use is of DataTable's.
It's not a good idea to use the ajax function which is used by some other plugin.
Here the Ajax call you want to Re-Use is used by the function DataTable. Instead of re-using that you can create a wrap-up function which makes ajax request.
Every-time if you want to make ajax request you can call that function with specified parameters.
Example :
function customAjax(url,data,method,success_message,fail_message){
$.ajax({
url:url,
data:data,
method:method,
success:function(response){
alert(success_message);
},
error:function(response){
alert(fail_message);
}
});
}
And call using :
customAjax("xyx.php","username=abc&password=ushfush","POST","Login Successfull","Something went wrong");
I am using jQuery Data Table plugin where I select a lot of data from server side. I try to using scroll to display these huge data (more than 500,000) like this,
but when I scroll to the end of the bottom , It's will back to top. And I found it's cannot scroll more than 10000 records. It's will back to top soon.
my code as follow,
$(document).ready(function() {
$.fn.dataTable.ext.errMode = 'none';
var table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"jQueryUI": true,
"ordering": true,
"searching": true,
"order": [[1, 'desc']],//default
"lengthMenu": [
[50, 100, 1000],
[50, 100, 1000]
],
"ajax": {
url: "process.php",
type: 'POST',
data: {
start: "<?php echo $start; ?>",
end: "<?php echo $end; ?>"
}
},
"columns": [
{
"className":'details-control',
"orderable":false,
"data":null,
"defaultContent": ''
},
{ "data": "time"},
{ "data": "message","orderable": false}
],
"dom": 'frtiS',
"scrollY": 600,
"scroller": {
"loadingIndicator": true
},
"deferRender": true
} );
Please help me do that, or suggest better solution.
i using jquery datatables , i have 2x table with aoColumns option and 1x without aoColumns
so i want do the following
if(aoColumns != false)
add option in array
i tried that but it didnt work
function Data_Table_Function(file,Language,ServerParams,Row_Call_Back,pagation,columns_sort,aoColumnDefs){
var Options_Data_Table = {};
Options_Data_Table = {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": file,
"sPaginationType": "full_numbers",
"bPaginate": true,
"oLanguage": Language,
"iDisplayLength": 25,
"aLengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "الكل"]
],
"fnServerParams": ServerParams,
"aaSorting": [[ 0, "desc" ]],
"fnRowCallback": Row_Call_Back,
"fnDrawCallback": pagation,
"bInfo": false,
"aoColumnDefs":aoColumnDefs
};
if(columns_sort)
Options_Data_Table.push("aoColumns" : columns_sort);
return Options_Data_Table;
}
Options_Data_Table is object, not array:
Options_Data_Table["aoColumns"] = columns_sort;
OR
Options_Data_Table.aoColumns = columns_sort;
should work.
You can't use push when it comes to objects (as it is a method exclusive to arrays).
Use:
Options_Data_Table.aoColumns = columns_sort;
instead.
The problem is that Options_Data_Table is an object, not an array. In javascript arrays are declared with: [ ]
Documentation about javascript arrays:
http://www.w3schools.com/js/js_obj_array.asp
The correct way for add that property is:
Options_Data_Table.aoColumns = columns_sort;