ASP.NET DataPager Next/Previous buttons client onlick event - asp.net

Question

How can I add client (javascript) onclick event to Next/Previous links in DataPager?

Answer 1

You Can add a new button in data pager and worked on it's click event.
<asp:ListView runat="server" ID="ListView1"
DataSourceID="SqlDataSource1">
<LayoutTemplate>
<table runat="server" id=" table1">
<tr runat="server" id="itemPlaceholder">
</tr>
</table>
<!-- This is the pager. Define all necessary markup here. -->
<asp:DataPager runat="server" ID="DataPager" PageSize="5">
<Fields>
<asp:TemplatePagerField>
<PagerTemplate>
<asp:Button ID="btn_Submit" runat="server" Text="Button" onclientclick="eventHandler(this)" />
</PagerTemplate>
</asp:TemplatePagerField>
</Fields>
</asp:DataPager>
</LayoutTemplate>
</asp:ListView>

Answer 2

The answer above (by Sheery) works great for custom pager elements. However, when using the stock Numeric or Next/Previous pager styles of the ListView or DataGrid, you don't have near as much control. By using client-side jQuery/javascript selectors, you can unobtrusively attach client-side handlers to the pager elements. For this example, I'm tracking if any form field value has changed and if so, then prior to allowing the pager to execute it's default behavior of posting back to the server, we're confirming with the user that they have unsaved changes.
$(function () {
var _formChanged = false;
// grabs all pager links in last row of table named dgQuestions
// and attachs a click eventhandler via jQuery library
$("#dgQuestions tr:last a").click(function(e) {
if (!_formChanged)
return true;
var ok = confirm('You have UNSAVED changes. Continue?');
if (ok) {
return true;
}
else {
//Prevent the submit event and remain on the screen
e.preventDefault();
return false;
}
});
// delegates change event handling to the form to indicate if ANY
// form field value changed for testing prior to paging
$("#form1").change(function(e) {
_formChanged = true;
});
});
});
OR
Can also utilize the beforeunload event of the window to catch ANY navigate-away action to test for unsaved changes as well. This code excludes the actual click of the 'save' button.
$(window).on('beforeunload', function (e) {
if (e.originalEvent.explicitOriginalTarget.id != "btnSave") {
if (_formChanged)
return 'You have UNSAVED changes. Continue?';
}