page size control and filter disappear after postback

NoBullMan

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' });
    })

NoBullMan

Any gurus out there; anyone?

kthorngren

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

NoBullMan

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();

NoBullMan

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.

kthorngren

Maybe you are getting a Javascript error?

Have you checked the browser's console for errors?

Kevin

NoBullMan

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.

NoBullMan

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!

NoBullMan

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
    });
}