Batuhan Ozdal Batuhan Ozdal - 7 months ago 20
Javascript Question

call a function each time page changed in datatable

I am using jquery and datatables but stuck in somewhere.I have a gridview and I am trying make something like alerting the id of the selected row. My onclick event only works for first page's datas and thats understandable since I only call it when table first populated. So how can I make that function run when page changed ?
Here is my gridview:

<asp:GridView ID="GridView1" CssClass="mGrid" runat="server" DataSourceID="EntityDataSource1" AutoGenerateColumns="False" DataKeyNames="UrunId">
<Columns>
<asp:TemplateField ItemStyle-CssClass="hiddenTr" FooterStyle-CssClass="hiddenTr" HeaderStyle-CssClass="hiddenTr">
<ItemTemplate>
<%#Eval("UrunId") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="İsim">
<ItemTemplate>
<%#Eval("UrunAdi") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fiyat">
<ItemTemplate>
<%#Eval("UrunFiyati") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Para Birimi">
<ItemTemplate>
<%#Eval("ParaTipi") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Kategori">
<ItemTemplate>
<%#Eval("UrunKategori") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sınıf">
<ItemTemplate>
<%#Eval("MP") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>


And my jquery:

$(document).ready(function () {

$("#<%=GridView1.ClientID%>").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
"language": {
"search": "Ara",
"lengthMenu": "Her sayfada _MENU_ kayıt göster.",
"infoFiltered": "_MAX_ kayıt arasından filtrelendi.",
"info": "_PAGES_ sayfa arasıdan _PAGE_.sayfa gösteriliyor.",
"paginate": {
"first": "İlk",
"last": "Son",
"next": "Sonraki",
"previous": "Önceki"
}
}
});
SatirlaraOnclickAt();
});

function SatirlaraOnclickAt() {
$("#<%=GridView1.ClientID%> tr").click(function () {
var ilkSatir = $("#<%=GridView1.ClientID%>").find("tr:first").find("td:first").text();
var secilenSatir = $(this).find("td:first").text();
if (ilkSatir != secilenSatir) {
var id = $(this).find("td:first").text();
alert(id);
}
});
}


Like I said, functions work well but I need to run onclick function each time the page changes.

Answer

You have an attribut fnDrawCallback, like :

$(document).ready( function() {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
      alert( 'DataTables has redrawn the table' );
    }
  } );
} );

This function is called on every 'draw' event, and allows you to dynamically modify any aspect you want about the created DOM.

Doc : http://legacy.datatables.net/usage/callbacks