How can i refresh only data in table with javascript?

Question

I have page with data table and i need to refresh only data in table and i use bootstrap datatable to sort but when i use refresh data in my page will can not use bootstrap to sort data. How can i fix it?

this my code for get data to refresh

    $request = $this->m_request->get_request_list();

    $row = '';
    $row .= '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="datatable">';
    $row .= '<thead>';
    $row .= '<tr>';
    $row .= '<td>Start</td>';
    $row .= '<td>End</td>';
    $row .= '<td>Type</td>';
    $row .= '</tr>';
    $row .= '</thead>';
    $row .= '<tbody>';
    foreach ($re as $r){
        $row .= '<tr id="sh">';
        $row .= '<td>'.$r->date_start.'</td>';
        $row .= '<td>'.$r->date_end.'</td>';
        $row .= '<td>'.$r->leave_type.'</td>';
        $row .= '</tr>';
    }
    $row .= '</tbody>';
    $row .= '</table>';
    echo $row;

and this is my javascript to get data to show

var $container = $("#show_data");
$container.load("<?php echo site_url('request/get')?>");
var refreshId = setInterval(function()
{
    $container.load('<?php echo site_url('request/get')?>');
}, 3000);

if i show table in view page the data will can not refresh to get data and if i call table in controller page i will can not use bootstrap datatable. Please help. Thank you so much for your help.

madalinivascu · Accepted Answer · 2016-09-16 11:10:15Z

1

Reinitialize you datatable after each ajax success

var $container = $("#show_data");
$container.load("<?php echo site_url('request/get')?>",function(){ $('table').DataTable();});

var refreshId = setInterval(function()
{
    $container.load("<?php echo site_url('request/get')?>",function(){ $('table').DataTable();});
}, 3000);

answered Sep 16, 2016 at 11:10

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

swett.bp Over a year ago

thank you, it's impossible if i set auto reload page when have new data and if not have new data not reload page.

madalinivascu Over a year ago

why reload the page? ajax is for not reloading the page, you defeat the purpose of ajax

Collectives™ on Stack Overflow

How can i refresh only data in table with javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related