Refresh table data and retained pagination with server side datasource binding

jennz01

Hi, i am developing a web application in ASP.NET and i want to apply ajax to refresh data inside a Datatable. I have tried to use updatePanel , ajax.reload() and fnStandingRedraw() but still not working.

Anyone free to help? Thanks!

my sample code as below:

C# Code - To load and bind data into the table "lvcarton"

protected void loadcartonlist()
    {
        if (MySQLConn.open())
        {
            {
                string selcarton = "Select DISTINCT carton_code from sl_dodtl where carton_code IS NOT NULL AND carton_code <> '' order by updatedate DESC";
                MySqlCommand command = new MySqlCommand(selcarton, MySQLConn.connection);
                MySqlDataReader reader = command.ExecuteReader();

                
                lvcarton.DataSource = reader;
                lvcarton.DataBind();
                reader.Close();
                reader.Dispose();
                
            }
        }
        MySQLConn.close();
    }


protected void buttonUpdate_Click(object sender, EventArgs e)
    {
        
        ScriptManager.RegisterStartupScript(this, GetType(), "rebindData", "rebindData();", true);
    }

in ASPX

<table id="cartonlist">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Carton No</th>
                            <th>Barcode </th>
                            <th>Status </th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        <asp:ListView ID="lvcarton" runat="server">
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        <%#Container.DataItemIndex +1 %>
                                    </td>
                                    <td>
                                        <%#Eval("carton_code") %>
                                    </td>
                                    <td>
                                        <span class="barcode">*<%#Eval("carton_code") %>*
                                        </span>
                                    </td>
                                    <td></td>
                                    <td>

                                        <asp:LinkButton ID="lbedit" OnCommand="lbedit_Command" CommandArgument='<%#Eval("carton_code") %>' runat="server">
                          <span class="glyphicon glyphicon-edit"></span> 
                                        </asp:LinkButton>
                      
                                    </td>

                                </tr>

                            </ItemTemplate>
                        </asp:ListView>
                    </tbody>
                </table>

                <asp:Button ID="buttonUpdate" runat="server" Style="display: none" OnClick="buttonUpdate_Click" />

To show the datatable

<script>
                    $(document).ready(function () {

                        $('#cartonlist').show();
                        $('#cartonlist').DataTable();

                    });
                </script>

I tried this method to reload the table every 3 seconds, the data can be refreshed but it does not retain the paging.

<%--<script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(delayUpdateClick);
        function delayUpdateClick(sender, args) {
            button = $get("<%= buttonUpdate.ClientID %>");
            setTimeout(function () { button.click(); }, 3000);
        }
    </script>--%>

    <script type="text/javascript">
        function rebindData() {
            $('#cartonlist').show();
            $('#cartonlist').DataTable();

        }
    </script>

bindrid

How about just using paging and serverSide: true against a web method?

Is the current page the user is looking at getting updated?

Is the update updating existing data in the table or appending to it?

I am trying to get a better grasp as to why you are dating your tables so frequently.

btw, if server side is set to try, you can tell your back end exactly what page of data to get.

jennz01

the existing data can get updated or new data can be appended to the table when pressing refresh button. but i want the page that user is looking at is automatically updated or appended without pressing refresh.

i tried to set paging and serverSide to true but it does work also.

<script type="text/javascript">
        function rebindData() {
            $('#cartonlist').show();
            $('#cartonlist').DataTable({
                "serverSide": true,
                
                "paging": true
            });

        }
    </script>

jennz01

actually the page is function like this, when a new carton no is created, the page will automatically add it on top of the table.

bindrid

The code you are showing is not using ajax at all. You are reloading your page every 3 seconds. (Is the data that critical to need that update?)

If you want to stick with this, what you need to do is store your current page in a client session variable then use that value when the page is fully loaded to set the page back to where the user was.

DataTables can help you with that https://datatables.net/examples/basic_init/state_save.html

jennz01

Thanks for help, i solved my problem by setting stateSave: true

Then i use a timer in updatePanel and the following function

<asp:Timer ID="Timer1" runat="server" Interval="3000" OnTick="Timer1_Tick"></asp:Timer>

 protected void Timer1_Tick(object sender, EventArgs e)
    {

        UpdatePanel1.Update();
        ScriptManager.RegisterStartupScript(this, GetType(), "rebindData", "rebindData();", true);

    }

                function rebindData() {
                    $('#cartonlist').show();
                    $('#cartonlist').DataTable({
                        stateSave: true
                    });


                }
            

fatimaelkheder

hi,
I have Problem after update Refresh table data and lost !
this is befor(https://datatables.net/forums/uploads/editor/1v/hawaw9pyub0k.png "")
and after plzz help

colin

@fatimaelkheder We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin