page size control and filter disappear after postback

page size control and filter disappear after postback

NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

Initially both page size control and filtering show up on top of the table. I have a link in each row of data table to cause a postback. On postback table and data is there but page size selection and filtering are gone.

    $(document).ready(function () {
        var $j = jQuery.noConflict();
        var adminUsersDT = $j("#fcTable").DataTable({ dom: 'lfrtip' });
    })

Answers

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    Any gurus out there; anyone?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Maybe you can post a link or a test case showing the issue. In order to help we would need to see what you are doing. The code you posted is basic Datatables init code and doesn't provide the detail of what you are trying to do.

    Kevin

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    Thanks for the response.
    I am displaying data inside a boostrap table wrapped by jQuery datatable. The rows are generated using asp.net repeater control.
    Initially, i see search and page size selection. I click on a button that causes postabck; data in the table is updated but search and page size control disappear.

    in .aspx file:

        <asp:UpdatePanel runat="server" ID="upnlPC" RenderMode="Block">
            <ContentTemplate>
                <div runat="server" id="divTRP" style="display:block">
                    <table id="fcTRPTable" class="table table-striped table-bordered table-hover table-responsive">
                        <thead>
                            <tr>
                                <th>Area</th>
                                <th>District</th>
                                <th>Plant</th>
                            </tr>
                        </thead>
    
                        <tbody>
                            <asp:Repeater runat="server" ID="rptTRPTableData">
                                <ItemTemplate>
                                    <tr>
                                        <td runat="server" id="tdArea"><%# Eval("Area") %></td>
                                        <td runat="server" id="tdDistrict"><%# Eval("District") %></td>
                                        <td runat="server" id="tdFacility"><%# Eval("Plant") %></td>
                                </ItemTemplate>
                            </asp:Repeater>
                        </tbody>
                    </table>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    
    <script>
        $(document).ready(function () {
            //var $j = jQuery.noConflict();
            // DataTable, save state
            var adminUsersDT = $('#fcTRPTable').DataTable({
                'bDestroy':true,
                "bStateSave": true,
                dom: 'lfrtip',
                "fnStateSave": function (oSettings, oData) {
                    localStorage.setItem('fcTRPTable', JSON.stringify(oData));
                },
                "fnStateLoad": function (oSettings) {
                    return JSON.parse(localStorage.getItem('fcTRPTable'));
                }
            });
        });
    </script>
    

    in aspx.cs; Page_Load():

            DataTable dtVD = someBLL.GiveMeTableData();
            rptTRPTableData.DataSource = dtVD;
            rptTRPTableData.DataBind();
    
  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    I realized it is not just the search and page size selection that disappear; the entire jquery datatabe goes away; I lose all the jQuery Datatable functionality (sorting, ...). Not sure how to reconstruct the datatable on postback.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Maybe you are getting a Javascript error?

    Have you checked the browser's console for errors?

    Kevin

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    I noticed the problem was caused by table being inside an update panel and jQuery script outside of it. Partial postback did not force the script to run again. If I remove the update panel it works fine. Any idea on how to have the update panel and jQuery Datatable both? Moving the script inside update panel did not help either.

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    I see alot of people having issues with jQuery datatable and update panels. However, none of the issues I found on the forum has a response or a fix; most just say this idscussion is closed!

  • NoBullManNoBullMan Posts: 61Questions: 17Answers: 2

    for someone running into this issue and not getting any response!
    Keep your data table inside update panel and add the following javascript code:

    $(function () {
        bindDataTable(); // bind data table on first page load
        // bind data table on every UpdatePanel refresh    
    
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable);
    });
    
    function bindDataTable() {
        var myDT = $('#fcTable').DataTable({
            whatever your setting are
        });
    }
    
This discussion has been closed.