$ (document). Ready (function () {varotable = $ ('#tbl-resources'). dataTable ({bjqueryui:false, Bfilter:true, Bpaginate:true, Bsort:false, Binfo:true, "Olanguage": {"Ssearch":"Click on the column to sort/search all columns for:" } , "Spaginationtype":"simple_numbers","Bautowidth":false, "Sdom":'< "row View-filter" < "col-sm-6" < "#ddl-category" >>< "col-sm-6" < "Pull-right" f>>>t < "row View-pager" < "col-sm-7" < "Pull-left" l>< "Pull-right" i>>< "col-sm-5" < "Pull-right" p >>>', "Aocolumns": [ NULL, NULL, NULL, { "width":"40%" } ], "Buttons": [{Extend:'Collection', Text:'Select Resource Category', "Fnclick": Function (Nbutton, oconfig, Oflash) {alert ('Mouse Click'); } } ] }); $label= $('<label/>'). Text ('Resource Category:'). AppendTo ('#ddl-category') $label. Append (" "); //Insert the Select and some options$Select= $('<select/>', {'class':'Form-control'}). AppendTo ('#ddl-category') @foreach (varIteminchmodel.resourcecategories) {<Text> $('<option/>'). Val ('@item. Value'). Text ('@item. Text'). AppendTo ($Select); </Text>} otable.$ (". Editresource"). On ('Click', function () {varCategory = $ ('#ddl-category:selected'). Val (); alert (category); varoverridden = $ ( This). Data ('overridden'); varResourceId = $ ( This). attr ('Data-resourceid'); $.ajax ({URL:'@Url. Action ("Editresource", "correspondent")', type:"POST", data: {Selectedid:resourceid, selectedcategory:category, Isoverriddenresource:overridden}, }). Success (function (Result) {$ ('#div-edit-modal'). HTML (result); $('#edit-modal'). Modal ('Show'); }); }); });
My last column in a Datatable is link, but work on the first page, whenever I changed the page number or number shown O N Page the links were not working.
Solution:delegated Events has the advantage that they can process events from
Descendant elements that is added to the document at a later time. By
Picking an element, which is guaranteed to being present at the time the
Delegated event handler is attached, you can use delegated events to
Avoid the need to frequently attach and remove event handlers.
So, instead of using
$ (". Editresource"). Click (function () {
Need to use datatables.$ () which is
otable.$ ('. Editresource '). On ('click', function () {
DataTable Javascript Link not working on 2nd page