angularjs - How to prevent destroy data from DataTable with Angular -
i'm try implement datatables angular, i'm googled , many solutions creating directives, ok old "normal" way draw datatable, problem sorting or typing search box data lost!! e.g:
and code:
view
var myapp = angular.module('myapp', ['ngroute','ui.utils']); myapp.controller("companycontroller", function ($scope, $window, companyservice) { $scope.companies = []; $scope.company = {}; $scope.datatableopt = { //custom datatable options "alengthmenu": [[10, 50, 100, -1], [10, 50, 100, 'all']], }; $scope.$watch("data", function (value) { console.log("data changed, refresh table:"); var val = value || null; if (val) { } }); $scope.initializeindexview = function () { var getallprocess = companyservice.getallcompanies(); getallprocess.then(function (response) { //console.log(response.data) $scope.companies = response.data; }, function (response) { console.log(response); }) } });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> <table id="company-table" class="table table-striped table-bordered" ui-jq="datatable" ui-options="datatableopt"> <thead> <tr> <th>id</th> <th>register time</th> <th>short name</th> <th>long name</th> <th>status</th> <th>owner client</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="item in companies"> <td>{{item._id}}</td> <td>{{item.registertime}}</td> <td>{{item.longname}}</td> <td>{{item.shortname}}</td> <td>{{item.companystatus}}</td> <td>{{item.ownerclient}}</td> <td><a href="@url.action("edit","company")&companyid={{item._id}}">edit</a> | <a href="@url.action("delete","company")&companyid={{item._id}}">delete</a></td> </tr> </tbody> </table>edit 1: follow these snippet , works fine because data static: http://codepen.io/kalaiselvan/pen/rrbzda
angular js
var app = angular.module('myapp', ['datatables']); app.controller("myctrl", function ($scope, $http, dtoptionsbuilder, dtcolumnbuilder) { $scope.isdisabledupdate = true; $scope.getalldata = function () { $http({ method: "get", url: "http://localhost:8200/employee/get_allemployee" }).then(function (response) { $scope.employees = response.data; }, function () { alert("error occur"); }) }; $scope.vm = {}; $scope.vm.dtoptions = dtoptionsbuilder.newoptions() .withoption('order', [0, 'asc']); view page
<div class="panel-body" ng-init="getalldata()"> <div class="table-responsive"> <table class="table table-striped table-bordered" datatable="ng" dt-options="vm.dtoptions"> <thead> <tr> <th>s.no</th> <th> id </th> <th> city name </th> <th> actions </th> </tr> </thead> <tbody> <tr ng-repeat="emp in employees"> <td>{{$index+1}}</td> <td> {{emp.cid}} </td> <td> {{emp.cityname}} </td> <td> <button type="button" class="btn btn-default btn" ng-click="getcustomer(emp)"><i class="glyphicon glyphicon-pencil"></i></button> <button type="button" class="btn btn-default btn" ng-click="deleteemp(emp)"><i class="glyphicon glyphicon-trash"></i></button> </td> </tr> </tbody> </table> </div> </div> <script src="~/scripts/jquery-1.12.4.min.js"></script> <script src="~/scripts/jquery-ui.js"></script> <script src="~/scripts/angular.js"></script> <script src="~/scripts/angular-datatables.min.js"></script> <script src="~/scripts/jquery.datatables.min.js"></script> <script src='https://cdn.datatables.net/1.10.12/js/datatables.bootstrap.min.js'></script> i hope code you....
Comments
Post a Comment