After using table.destroy() method my table rows are still displayed, only the search box and other borders of datatable are not displayed.
I want to delete all the rows in the datatable, basically i want to delete the whole datatable so that i can reinitialize it.
Thank you
When you use the destroy() method you are effectively returning the table back to its original state. The HTML for the table is still present on the page hence why you can still see the table rows, without the added DataTables functionality.
If you want to remove the data rows from your DataTable, you may want to look at the clear() method, for example:
table.clear();
I have set up a jsfiddle which demonstrates these options.
If you can provide your code I should be able to give you a more accurate answer.
In case someone else finds this thread, I had the same issue when trying to replace a datatable with an ajax call. Calling destroy and then reinitializing the datatable after the ajax response worked for me with no errors. documentation
$('#myTrigger').click(function(e){
e.preventDefault();
table.destroy();
$.ajax({
type: 'post',
url: 'processor.php',
data: $('#myform').serialize(),
success: function (response) {
var table = $('#myTable').DataTable({
"pageLength": 25
});
}
});
});
Related
I'm fairly new to using WordPress AND AJAX for that matter. I need to have a Table in my admin area which is populated with enquiries to my site.
I have set up a custom table in the admin panel which is populated by an external database. This works fine. Once this has been populated I want to be able to change a select box to keep track of the status of certain enquiries.
I have inserted the select boxes and all seems well. At this point however, I want to use AJAX to post the changed state (in particular the index no. of the new selected option) back to my database to be populated.
I have found a number of examples to do with this and have spent a wee while trying to get my head around it but once the AJAX post is sent, I am not sure how OR where to deal with the receipt of this and have it update the database.
At the moment the url which the AJAX post points towards is the .php file in which my custom table is stored.
Could someone please explain what each aspect of the following code does, and what steps I seem to missing:
jQuery(function( $ ) {
$(".select-status").on( 'change', function() {
var $currentSelect = $(this);
var currentId = $currentSelect.attr('id');
var url = "/wp-content/plugins/custom-list-table-example/list-table-example.php"; // the script where you handle the form input.
console.log(currentId['value']);
$.ajax({
type: 'POST',
url: url,
data: $currentSelect.serialize(),
success: function(data) {
alert(data);
},
error: function() {
alert('There was an error: Failed to update database');
}
})
});
});
Where select-status is the class given to each select box.
Any help would be massively appreciated.
This site gave me hope but I can't see if this is relevant or where I would implement the different parts within WordPress.
I'm just trying to load the data for a select2 dropdown using Ajax, instead of putting the large dataset inline in my HTML.
$('input[name="field"]').select2({
ajax: {
url: "/data.json",
dataType: "json",
results: function(data,page)
{
return data;
}
}
});
This works, in that it waits until I "open" my select2 list before making the Ajax call to get the data. It then also displays the data correctly. However, it isn't filtering the list as I type. Instead, it makes repeated ajax calls to (presumably) get the filtered data.
Also, if I set an existing value in my form, it doesn't appear in my select2 control. I'm guessing this is because I'm not using initSelection but I'm not clear on how to do this correctly.
Am I doing this all wrong? It appears that what I really want is the functionality of data but with remote loading.
I don't think this is ideal, but it works:
$.get("/data.json", function(data)
{
$('input[name="field"]').select2({
data: data,
});
});
Can someone please help me i want to update a database record by using the dropdownlistbox,
so when i select an option from the dropdown the database is updated with that value for that record, without having to click a submit button using codeigniter.
I know the best way to go about this is with AJAX
Yeah AJAX can make it work, and doing it with jQuery can make it a lot easier. You can add an event listener to your dropdown list, listening to a change in its value:
$("#the-dropdown-list").change(function() {
var value = $(this).attr("value");
$.ajax({
url: "path/to/controller/action/",
type: "POST",
data: {value: value},
success: function() {
// whatever you want to do after
}
});
});
This will detect a change in the dropdown list value, and then send it to the controller action given in url in $.ajax object. After that you can just update the database record like you would usually do. In the controller, the new value can be obtained using $_POST['value'], since we defined type to be POST and the different values to be passed to controller action are in the data.
I need to display a number of "dynamic" grids using jqGrid. By dynamic I mean that both definition and data of the grid are retrieved from a database. There are many grids on the page, so I am trying to minimize the number of server trips, and there is a lot of data, so server-side paging is a must.
My workflow is
On initialization of each grid, retrieve grid definition and first
page of data in one server call.
If a user sorts/pages, then retrieve a page of data from the server
Because I want to retrieve the grid definition and first page of data in one call, I cannot use datatype: 'json', url: '###' approach; instead I do:
grid.jqGrid({
mtype: 'post',
...
datatype: function (postdata) {
if (!init.data) {
var request = {
screenId: settings.screenId,
pageNumber: postdata.page,
pageSize: postdata.rows,
sortColumn: postdata.sidx,
sortDirection: postdata.sortd,
date: settings.date
};
site.callWs("/MyService", request, function (pageResponse) {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
});
} else {
//WHAT TO CALL HERE TO SET A PAGE OF DATA?
init.data = null;
}
}
});
My data object (pageResponse or init.data) looks like this
I am not sure what method to call on jqGrid once a page of data is returned. I considered addJSONData, but it seems so inefficient to convert JSON back to string, then use EVAL(). Also, considered addRowData or setting the data property, but I am confused how to instruct jqGrid that I am doing server-side paging -- if I set the data property to one page of records, what do I need to do to tell jqGrid that there is a total of 50 records and this is page 1 out of 10.
Thanks for your help.
It was a user error (mine :). I had some show/hide logic in loadComplete of jqGrid, but this event does not fire when addJSONData is called.
addJSONData works just fine when provided with a properly-structured JavaScript object.
I have a delete button. which on click it should visit a url like /delete/{id} and once the response from that url is true. i want to delete the comment box like in facebook.
I wont add any extra than Leo's comment, but I will explain with some code. Presume that you are using jQuery...
$(document).ready(function(){
$('tr a.delete').live('click', function(e){
e.preventDefault();
var link = $(this);
$.get($(this).attr('href'), null, function(response){
if(response == 'ok'){ //you should invent how to get 'ok' or other string identifying that the deletion is successful.
link.parents('tr').remove();
} else {
alert('There is a problem while deleting this element');
}
});
})
});
if you put this code on your project it will handle all links which had .delete class and are in a table row.
There are two things which you should do:
You need to pass some string in
order to detect if the operation is
successful or not. In my example I
would print "ok" on success
deletion.
If your table has pagination, it wont
rebuild the table, while it just
will remove the row from the table.
and if you have let's say 5 rows per
page and you delete all of them the
page will remain empty while there
will be other records in the table.
That's why instead of removing the
tr I would reload the whole page.
In that case the code for successful deletion will look like this:
if(response == 'ok'){
$('#content').load(window.location);
}
The script is not optimised, but it will give you the ideas how to achieve your ideas.
HTH
So write an onClick event handler in your view, a php delete method on the appropriate controller called by the event handler and a javascript action to perform when the ajax call returns success.