I have a Html PagedList like below,
<div id="contentPager">
@Html.PagedListPager(Model, page => Url.Action("ServerPaging", new { page }))
</div>
And this is the output HTML for pager,
<div id="contentPager">
<div class="pagination-container">
<ul class="pagination">
<li class="active">
<a>1</a>
</li>
<li>
<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#targetContainer" href="/MyController/ServerPaging?page=2">2</a>
</li>
<li>
<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace" data-ajax-update="#targetContainer" href="/MyController/ServerPaging?page=3">3</a>
</li>
</ul>
</div>
</div>
I want the click event Javascript function to be called when I click page numbers from this pager without going to server action ServerPaging.
This is how I have implemented the Javascript event listener.
$(document).on("click", "#contentPager a", function () {
//............
});
But it's still calling the server action ServerPaging.
Remove the Url from the href property and set to void function.
<a data-ajax="true" data-ajax-method="Get" data-ajax-mode="replace"
data-ajax-update="#targetContainer" href="javascript:void(0)" data-pageno="2" >2</a>
Then you need to get the page number from the data-pageno attribute in the event function:
$(document).on("click", "#contentPager a", function () {
var pNo = this.data("pageno");
alert(pNo);
});