I am using jquery datatable to list my database values.
I want create a country and its state in same page while that initially the state datatable is empty.Once I create country the country id is generated and can create state with that country id in same page.It also created fine but the problem is datatable is not reloading it should show the state which was created but its not showing.The problem is country id which is generated is not passing to the ajax parameter in datatable while reloading it.
country_id=$("#country_id").val();
dataTable = $('#example').DataTable( {
"serverSide": true,
// Load data for the table's content from an Ajax source
"ajax": {
"url": datatable_url,
"type": "POST",
data:{country_id: $("#country_id").val()},
error: function () { // error handling
$(".table-grid-error").html("");
$("#table").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#table-grid_processing").css("display", "none");
}
},
],
});
I reloading it by
$.ajax({
url: 'url',
type: "POST",
data: {
//data
},
success: function (data) {
reload_tabless();
},
function reload_tabless() {
dataTable.ajax.reload(null, false); //reload datatable ajax
}
Please help me rectify it.
it looks like you have the url hard coded to the string 'url' in the code that should do the ajax call before calling reload_tabless() which most probably makes the ajax call to fail, thus not executing the success callback.
I don't think you need that extra ajax call. Simply execute reload_tabless instead of that ajax call.
Use "destroy": true inside DataTable section and call DataTable function again.
It will reload DataTable without postback.
Related
I have seen many stackoverflow questions on this and none of the answers have worked for me.
I have a DataTable that is initialized on the template inside <script> </script> tags, but the JS function that is handling the ajax call is in a different file and is loaded on page load.
I have data coming into the ajax function as a JSON object, I am also replacing the rows of the table with the data I get from the JSON object, but the datatables part of it is not refreshed (For ex: If row is deleted and table is empty, empty message is not shown).
How do I do refresh/re-initialization of the datatables inside of the ajax success? I was pointed here, but the documentation is really vague there and was not much help.
Here's my code:
leads.html
$(document).ready(function()
{
$('#leads_table').DataTable( {
"bInfo": false,
"language": {
"emptyTable": "There are no leads yet"
}
});
})
JS Function for Ajax:
$.ajax({
url: form.attr("action"),
data: form.serialize(),
type: form.attr("method"),
dataType: 'json',
success: function (data)
{
$('#leads_table').DataTable({...}) // Tried this, but complains about a duplicate initialization
//How do I refresh here?
$("#leads_table tbody").html(data.html_leads_list);
}
})
I want to update a section of a page using ajax when an image is clicked. When the image is clicked I pull values from a jQuery DataTable to populate an object. Then I call my action and pass in a JSON string of the object using JSON.stringify().
$("#image").click(function(e) {
data = {}
table = $("#myTable").dataTable();
$.each(table.fnGetData(), function(index, value) {
row = $(table.fnSettings().aoData[index].nTr);
data[row.find(".key")] = {
"val1": row.find(".val1").text(),
"val2": row.find(".val2").text(),
"val3": row.find(".val3").text(),
"val4": row.find(".val4").text(),
}
});
$.ajax({
url: "myAction",
contentType: "text/html",
data: {
json: JSON.stringify(data)
},
success: function(resp) {
alert(resp)
$("#myDiv").html(resp);
}
});
});
However, calling the ajax function results in an error in the javascript console that only says "no element found". When I check the network activity it tries to hit the correct url, but returns a 400 error.
I am sparing the back end details because I believe something in the stringify method to be the culprit here because when I pass a string literal as the ajax data such as data: {json: "foo"} it calls my action with no problem whatsoever.
The solution was to specify the ajax method as POST by adding the following attribute to the ajax call.
method: "POST"
No idea why this makes it work, but it does.
I need a little help. I am trying to implement bootstrap data table with ajax pagination. As this is mobile app (Cordova), I am fully dependent on javascript for server side too. Thats why in the url I am calling javascript function. Now I am not sure about how to get the POST data in it. Any help will be appreciated.
$(document).ready(function(){
$("#products").dataTable({
aLengthMenu: [
[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]
],
aaSorting: [],
bProcessing: true,
serverSide: true,
ajax:{
url : ProductList.getProductsPaginated(),
type: "post", // type of method , by default would be get
error: function(){ // error handling code
}
}
});
ProductList.getProductsPaginated(){
// This method gets called succesfully
// Need the post data here
}
});
Edit:
Let, without using the function as url param, let use a html page directly like
url : "page.html",
Now, how to get those post data in the html or js? Is there any other way for what I am looking?
I don't understand why you need the data inside that function, but it isn't getting called on ajax success, it's invoked because of the parenthesis, the only thing I think you could do there is to return the path of your json data, however you can call a function with your post data on ajax success like this:
ajax: {
url : ProductList.getProductsPaginated(),
type: "post",
dataSrc: function (data) {
// you can call a function here with the data as parameter
// you have to return the data, with modifications if you need
return data;
}
}
Thank you all for trying to help me. I have found no way to post data to a javascript function using ajax. In this case, I am unable to use DataTable's ajax feature to minimise data loading time by pagination. Ajax call can be made to server-side scripts only. Thats why I have disabled datatable's paging and implemented custom pagination using javascript.
I want to call a Javascript function once the table is done loading.
I thought of using onload() function on table, but later I came to know that onload() doesnt work for table.
As you are using ajax call to load the data in table, after that you can call the javascript function inside the success .
$.ajax(
{
type: "GET",
url: "yoururl",
data: "yourdata",
success: function(tableData)
{
// load the table using data
//Call the function you want to call
myJavascriptFunction();
}
});
I have a jQuery script that sends POST data via AJAX to a php file that then creates a table. I have used firebug to check the console and everything gets created properly. On the success: I reload the window and the table isn't displayed.
I know the table html was created properly from the php file because I commented out the reload so I could see exactly what it created) I have lots of things displayed on my page and would like the table in a particular spot. How can I get the table to actually display where I want it to?
<script>
$(document).ready(function () {
$("#stayinfobutton").click(function () {
var id = $('#id').val();
var dataString = {
id: id
};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/table_auto_guests.php",
data: dataString,
cache: false,
/*success: function(html)
{
window.location.reload(true);
}*/
});
});
});
</script>
The window.location call will reload a new page in the browser window, this will loose the data returned to the ajax call by the server.
Usually the response to Ajax calls is loaded directly into your page, something like:
success: function(html)
{
$('#guestsTable').html(html);
$('userForm').hide();
}
I made up the guestsTable div and userForm names, ;).
The return data may need some coercing to make it into html (I'm assuming your using JQuery), hopefully the php script will set it to html/text in the header, also dataType: html can be passed in the $.ajax({...}) call.
Alternatively, if the classes/table_auto_guests.php returns a full page which you want to load in the browser, Ajax may not be what you are looking for. This post contains code on how to submit the data as a form, and load the result as a new page.