How to add a Refresh Tab button

How to add a Refresh Tab button

philipphilip Posts: 11Questions: 5Answers: 0

Please describe exactly how to add a button that'll only refresh the current tab.

Ideally the Buttons plugin would offer a built-in Refresh button but it does not. We fetch data with "ajax": {"url":"getmyajax.foo"} so hopefully the process of adding a button that reloads it, and the tab itself, is moderately straightforward. Thanks :-)

This question has an accepted answers - jump to answer

Answers

  • ApezdrApezdr Posts: 43Questions: 4Answers: 5

    Try this out.

    window.location.href = window.location.href;
    

    When you say tab it's better if you're more exact. If you're referencing browser tab, this will do it.

  • philipphilip Posts: 11Questions: 5Answers: 0
    edited February 2017

    Good point. We separate our data tables into several tabs, so it's a button that refreshes a data table.

    I just now stumbled upon this so ended up with the following custom refresh button and it seems to work, I'm still testing and reading, but:

                {
                    text: "<span>Refresh Tab</span>",
                    action: function (e, dt, node, config) {
                        dt.ajax.reload(null, false);
                    }
                }
    
  • ApezdrApezdr Posts: 43Questions: 4Answers: 5

    Philip,

    If you're just looking to refresh the data in the table then your code above will take care of that for you.

    I would personally store the Datatable and just reference that.

    var myTable = $('#ClientData').DataTable( {

    and then call it like this.

    myTable.ajax.reload( null, false );

  • allanallan Posts: 54,688Questions: 1Answers: 8,553 Site admin
    Answer ✓

    @philip - Yup - that piece of code looks spot on. Just a simple call to ajax.reload().

    Allan

  • rodriformigarodriformiga Posts: 35Questions: 8Answers: 0
    edited September 2017

    Hello... It's my solution, to criate a new button instance:

    $.fn.dataTable.ext.buttons.refresh = {
        text: 'Refresh'
      , action: function ( e, dt, node, config ) {
          dt.clear().draw();
          dt.ajax.reload();
        }
    };
    

    And use the same as the default buttons

    , buttons: [ "print", "refresh"]
    
    
This discussion has been closed.