reload data after clicking button

reload data after clicking button

chucke1992chucke1992 Posts: 8Questions: 0Answers: 0
edited February 2014 in DataTables 1.9
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]

Replies

  • hsajjadhsajjad Posts: 28Questions: 0Answers: 0
    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
  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    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
  • chucke1992chucke1992 Posts: 8Questions: 0Answers: 0
    edited February 2014
    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]
  • chucke1992chucke1992 Posts: 8Questions: 0Answers: 0
    edited March 2014
    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
  • Santoshk1Santoshk1 Posts: 1Questions: 0Answers: 0

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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    @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

This discussion has been closed.