Question

I have implemented the jQueryPagination plugin to allow easy paging of a repeater control. This is working fine, however on this page I have a user control that allows the user to search for a ticket number. When the button to search is clicked, the pagination goes away and I see all of the repeater information, as well as my returned search result.

When I click the link button my jQuery seems to be non-existant.

Code:

<div id="msgLinks" class="subtabs">
            <asp:TextBox runat="server"  ID="txtSearchTicket"></asp:TextBox>
            <asp:LinkButton ID="lbSearch" runat="server" Text="Search" CausesValidation="false"
                onclick="lbSearch_Click" />
 </div>

jQuery (works on page load)

$('#tblRecAct').paginateTable({
        rowsPerPage: 5,
        Title: ".h1RecentActivity"
    });
    $('#tblMSG').paginateTable({
        rowsPerPage: 2,
        Title: ".h1SubmittedMessages",
        pager: ".pager2",
        pageNumbers: ".pageNumbers2"

    });

I have even tried calling

$(".subtabs a").click(function () {
        alert("Clicked");
        $('#tblRecAct').paginateTable({
            rowsPerPage: 5,
            Title: ".h1RecentActivity"
        });
    });

but it still does not work. Any ideas?

EDIT
New Code per request:

Page –

public string _Js = "";
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                rptRecentMessages.DataSource = CMS.Model.Profile.RecentMessages(0, "");
                rptRecentMessages.DataBind();
                _Js = "CreatePaging();";
                LoadStatusMessages();
            }
        }

User Control (holds the search button) –

rptRecentActivity.DataSource = CMS.Model.Profile.RecentActivity(20);
rptRecentActivity.DataBind();
_Js = "CreatePaging();";

Search Button Click –

protected void lbSearch_Click(object sender, EventArgs e)
        {
            string searchTerms = txtSearchTicket.Text;
            if (searchTerms == "")
                txtSearchTicket.Style.Add("border", "1px solid red");
            else
            {
                rptRecentMessages.DataSource = CMS.Model.Profile.RecentMessages(1, searchTerms);
                rptRecentMessages.DataBind();
                _Js = "CreatePaging();";
                LoadStatusMessages();
            }
        }

jQuery Code on the Page –

<script type="text/javascript">
    $(document).ready(function () {
        function CreatePaging(){
            $('#tblRecAct').paginateTable({
                rowsPerPage: 5,
                Title: ".h1RecentActivity"
            });
            $('#tblMSG').paginateTable({
                rowsPerPage: 2,
                Title: ".h1SubmittedMessages",
                pager: ".pager2",
                pageNumbers: ".pageNumbers2"

            });
        }

        $().ready(function(){
            <% =(this._Js) %>

        });

    });



</script>

When I am debugging and click on the search link now, I do not get a postback to a page_load and I am not sure why.

Answer 1

Change the click to

$(".subtabs a").click(function () {
    alert("Clicked");
    $('#tblRecAct').paginateTable({
        rowsPerPage: 5,
        Title: ".h1RecentActivity"
    });
    return false;
});

adding the code return false; will prevent the link from clicking but will run your jQuery code.

EDIT

Put your jQUery code into a function so that you can easily call it from your c#

function CreatePaging(){
    $('#tblRecAct').paginateTable({
        rowsPerPage: 5,
        Title: ".h1RecentActivity"
    });
    $('#tblMSG').paginateTable({
        rowsPerPage: 2,
        Title: ".h1SubmittedMessages",
        pager: ".pager2",
        pageNumbers: ".pageNumbers2"

    });
}

$().ready(function(){
    <% =(this._Js) %>
});

Then in your code behind, have a public string variable called _Js and when you bind the Repeater, set _Js = "CreatePaging();";