Jquery DataTable分页在postaback时不起作用

时间:2017-01-11 04:48:37

标签: javascript jquery asp.net datatables

Jquery DataTable分页不起作用我有13个分页我选择第5次分页当我点击我的gridview中的编辑按钮页面将回发并且分页不显示当前选择(第5)页面,它将直接到第1页面。当我在回发后选择我的分页中的任何页面时,它也是如何显示当前所选页面

我的代码是:

<script type="text/javascript" src="DataTable/jquery-1.11.1.min.js"></script>
    <script type="text/javascript"  src="DataTable/jquery.dataTables.min.js"></script>
<script>
            $(function () {
                // Setup - add a text input to each footer cell
                $('#<%=GridView1.ClientID %> th').each(function () {
                    var title = $(this).text();
                    if (title == "A Name" || title == "  Name" || title == "ttl") {
                        $(this).html(title + '<br/><input type="text" style="width:120px" placeholder="Search ' + title + '" />');
                    }
                    else {
                        if (title != " ") {
                            //$(this).html(title + '<br/><input type="text" style="background-color:#646464;border:none" disabled="disabled"   />');
                        }
                    }
                });

                // DataTable
                var table = $('#<%=GridView1.ClientID %>').DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": false,
                    "pageLength": 10,
                    "bLengthChange": false

                });

                table.columns().every( function () {
                    var that = this;

                    $( 'input', this.header() ).on( 'keyup change', function () {
                        if ( that.search() !== this.value ) {
                            that
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );
            } );
 </script>  

和Gridview:

 <asp:GridView ID="GridView1" runat="server" Width="100%" CssClass="mydatagrid" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AutoGenerateColumns="false"
                        EmptyDataText="No files uploaded" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">
<columns>
Some Columns
</columns>
</asp:gridview>

我尝试使用StateSave:true它只保存了保存页面数据表未完全加载

image here

任何人都可以告诉我 谢谢

1 个答案:

答案 0 :(得分:0)

如果没有看到您的服务器端或文件背后的代码,我无法确定您的问题就在这里。

如果您要在Page_Load事件中加载初始网格和值,则可能需要检查IsPostBack

您的Page_Load应该是这样的:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //page is being loaded in response to a client postback, so do not load initial values again
        //Do your initial loading of grid here
        YourPopulateGridMethod();
    }
}