reload data after clicking button

chucke1992

I load data by default like this

[code]$('.datatable').dataTable({
"sPaginationType": "bs_full",
"bProcessing" : true,
"sAjaxSource" : "loadusers.html",
"sAjaxDataProp" : "test"
});[/code]

My table on html page looks like this
[code]

Name
Surname
Username



[/code]


Server answer looks like this
[code] return "{ \"test\": [ "
+ "[ \"name1\", \"surname1\", \"username1\"],"
+ "[ \"name2\", \"surname2\", \"username3\"],"
+ "[ \"name2\", \"surname2\", \"username3\"]"
+ "] }"; [/code]


But how to load data by clicking button on the page? For example by clicking button
[code]Clicker[/code]

hsajjad

See fnReloadAjax @ http://datatables.net/plug-ins/api

If this doesn't work then follow the approach I'm using, mentioned here:
http://datatables.net/forums/discussion/19721/event-based-dt-refresh-via-fndestroy-then-re-init-and-fndatatablespipeline-incompatiblity-issue#Item_1

HTH

allan

Yup - fnReloadAjax as hsajjad says.

In 1.10 there is the `ajax.reload()` method built in: http://next.datatables.net/reference/api/ajax.reload()

Allan

chucke1992

I decided not to load data to the table by default and only by click. so I deleted [code]sAjaxDataDrop[/code]

But with [code]fnReloadAjax[/code] I've got an error in mozilla
[code]TypeError: $(...).fnReloadAjax is not a function[/code]
and in ie
[code]
SCRIPT5007: Unable to get property 'length' of undefined or null reference
jquery.dataTables.min.js, line 59 character 74
SCRIPT438: Object doesn't support property or method 'fnReloadAjax'
index.html, line 31 character 6
[/code]

Here my javascript(I'm using bootstrap 3)
[code]
$(function() {
$('.datatable').dataTable({
"sPaginationType": "bs_full",
"bProcessing" : true,
"sAjaxSource" : "loadusers.html",
});
$('.datatable').each(function(){
var datatable = $(this);
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', 'Search');
search_input.addClass('form-control input-sm');
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
length_sel.addClass('form-control input-sm');
});
$('#button1').click(function() {
$('#usertable').fnReloadAjax('loadusers.html');
});
});
[/code]

chucke1992

completely stupid mistake - I thought that plug in functions was there by default. after I added it to my file - it works now.

So. Thanks for help

Santoshk1

There is some alignment issue between head and data after button click if we use multi table at same page...

allan

@Santoshk1 - Please link to a test case as required in the forum rules. I also don't see how this relates to the original discussion in this thread. Please open a new thread for new issues.

Allan