I am using JQuery DataTable Plugin for Sorting , Filtering , Searching from
I have an edit button in my html markup on click of that a modal will open .
Its working fine , on click of edit button it open the modal but only for records on first page ( 5 records per page ).
When I using paging and goes to 2nd page or any other page than jQuery , Angular JS code on edit button does not do anything , neither it show modal .
I tried to check html markup but its valid . If I remove Jquery DataTable Plugin than it works on every record . Why code is not running for rest of records in other the pages
Below is my code to gave an idea about whats happening HTML
<tr id="row36" ng-show="!hiddenrow[36]" role="row" class="odd">
<td id="edit36" class="sorting_1">
<a id="editbtn_36" ng-click="SetData('36','11443','Person%20Name','06-10-2017','04-12-2017','PUNJAB','Badaun','N/A')" data-toggle="modal" href="#update_modal">
<i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" style="color:green"></i></a>
</td>
<td>36</td>
<td contenteditable="true">11443</td>
<td contenteditable="true">Yusuf Khan</td>
<td id="dp36" contenteditable="true">06-10-2017</td>
<td id="dp36" contenteditable="true">04-12-2017</td>
<td contenteditable="true">PUNJAB</td>
<td contenteditable="true">Badaun</td>
<td contenteditable="true">N/A</td>
<td>21-11-2017</td>
</tr>
Modal
<div id="update_modal" class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Record ID : {{RecordID}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><input type="text" ng-model="staffid" class="form-control" placeholder="Enter StaffID here"/></p>
<p><input type="text" ng-model="staffname" class="form-control" placeholder="Enter Staff Name here"/></p>
<p><input type="text" ng-model="fromdate" class="form-control" id="dp"/></p>
<p><input type="text" ng-model="todate" class="form-control" id="dp"/></p>
<select ng-model="state" ng-options="item for item in StateList" class="form-control"></select>
<select ng-model="branch" ng-options="item for item in BranchList" class="form-control"></select>
<p><input type="text" ng-model="reason" class="form-control" placeholder="Enter Reason here"/></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="UpdateSchedule()">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
DataTable Plugin Initialization
$('[id^="tbl"]').dataTable();
Angular Js Code
$scope.SetData = function (recordId,staffid,staffname,fromdate,todate,state,branch,reason)
{
$scope.RecordID = recordId.replace('%20',' ');
$scope.staffid = staffid.replace('%20', ' ');
$scope.staffname = staffname.replace('%20', ' ');
$scope.fromdate = fromdate.replace('%20', ' ');
$scope.todate = todate.replace('%20', ' ');
$scope.state = state.replace('%20', ' ');
$scope.branch = branch.replace('%20', ' ');
$scope.reason = reason.replace('%20', ' ');
$scope.StateList = [];
$scope.BranchList = [];
$http({
//Some Code Here
}).then(function mySuccess(response) {
$window.alert('Success');
}, function myError(response) {
$window.alert('Warning! It failed.');
});
}
Update 1 for davidkonrad Only