How to set page sortingpaging using datatable using angularjsltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap336cssbootstrapmincss34 gtltlink rel34stylesheet34 href34httpscdndatatablesnet11012cssdataTablesbootstrapmincss34 gtltscript src34httpscodejquerycomjquery311minjs34gtltscriptgtltscript src34httpscdndatatablesnet11012jsjquerydataTablesminjs34gtltscriptg

Hi SUJAYSCheck this example Now please take its reference and correct your codeDatabaseFor this example I have used of Northwind database that you can download using the link given belowDownload Northwind DatabaseControllerpublic class HomeController Controller GET Home public ActionResult Index return View public JsonResult GetCustomers NorthwindEntities entities new NorthwindEntities var customers entitiesCustomersSelectx gt new Id xCustomerID Name xContactName Country xCountry ToList return Jsoncustomers JsonRequestBehaviorAllowGet Viewltlink rel34stylesheet34 href34httpsmaxcdnbootstrapcdncombootstrap336cssbootstrapmincss34 gtltlink rel34stylesheet34 href34httpscdndatatablesnet11012cssdataTablesbootstrapmincss34 gtltscript type34textjavascript34 src34httpscodejquerycomjquery311minjs

jQuery DataTable Paging Sorting Searching using AngularJS in ASP.Net MVC

SUJAYS

SOLVED CLOSED ACTIVE ANSWERED
User: SUJAYS
Posted: on Jan 06, 2019 11:10 PM
Forum: AngularJS
Answer: 1
Views: 8329
Sample Code: Download

How to set page sorting,paging using datatable using angularjs?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script>
    angular.element(document).ready(function () {
        dTable = $('#pagewidth')
        dTable.DataTable();
    });
</script>
<div class="card-body">
    <div class="col-sm-4 p-0" id="with_print">
        <label>
            Search</label>
        <input type="text" ng-model="search" class="form-control" placeholder="Search">
    </div>
    <div class="col-sm-4 p-0" id="with_print" style="margin-top: 20px; margin-left: 50px;">
        @*
        <button type="button" name="Print" ng-model="Print" class="btn btn-primary right"
            onclick="window.print()" />
        *@
        <label>
        </label>
        <input type="button" id="with_print" class="btn btn-primary pi_button" onclick="window.print()"
            value="Print" />
    </div>
    <div class="table-responsive">
        <h3 style="text-align: center;">
            ITEM LIST</h3>
        <table class="table table-bordered" id="pagewidth">
            <thead>
                <tr>
                    <td ng-click="sort('PrimaryKey')">
                        <b>Id</b> <span class="glyphicon sort-icon" ng-show="sortKey=='PrimaryKey'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}">
                        </span>
                    </td>
                    <td>
                        <b>Code</b>
                    </td>
                    <td>
                        <b>Package </b>
                    </td>
                    <td>
                        <b>Carrier</b>
                    </td>
                    <td>
                        <b>Unit </b>
                    </td>
                    <td>
                        <b>Location</b>
                    </td>
                    @*<td>
                        <b>DateTime</b>
                    </td>
                    *@
                    <td>
                        <b>Number</b>
                    </td>
                    <td>
                        <b>Recipient</b>
                    </td>
                    <td>
                        <b>Phone</b>
                    </td>
                    <td>
                        <b>Address</b>
                    </td>
                    <td>
                        <b>Office </b>
                    </td>
                    <td id="with_print">
                        <b>Edit</b>
                    </td>
                    <td id="with_print">
                        <b>Delete</b>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="Packdet in  Package |filter:search  ">
                    <td>
                        {{Packdet.Code}}
                    </td>
                    <td>
                        {{Packdet.Package}}
                    </td>
                    <td>
                        {{Packdet.Carrier}}
                    </td>
                    <td>
                        {{Packdet.Unit}}
                    </td>
                    <td>
                        {{Packdet.Location}}
                    </td>
                    @*<td>
                        {{Packdet.TimeStamp}}
                    </td>
                    *@
                    <td>
                        {{Packdet.Number}}
                    </td>
                    <td>
                        {{Packdet.Recipient}}
                    </td>
                    <td>
                        {{Packdet.Phone}}
                    </td>
                    <td>
                        {{Packdet.Address}}
                    </td>
                    <td>
                        {{Packdet.Office}}
                    </td>
                    <td id="with_print">
                        <button type="button" class="fa fa-pencil-alt edit_pencil" value="Update" ng-click="UpdatePack(Packdet)">
                        </button>
                    </td>
                    <td id="with_print">
                        <button type="button" class="fa fa-trash delete_trash" value="Delete" ng-click="DeletePack(Packdet)">
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 7

Reply
ANSWER
User: dharmendr
Replied: on Jan 09, 2019 03:00 AM
Report

Hi SUJAYS,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetCustomers()
    {
        NorthwindEntities entities = new NorthwindEntities();
        var customers = entities.Customers.Select(x => new { Id = x.CustomerID, Name = x.ContactName, Country = x.Country }).ToList();
        return Json(customers, JsonRequestBehavior.AllowGet);
    }
}

View

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.directive.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.factory.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.bootstrap.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['datatables'])
    app.controller('MyController', function ($scope, $http, $window) {
        $http.get("/Home/GetCustomers").then(function (response) {
            $scope.Customers = response.data;
        }, function (response) {
            alert(response.responseText);
        });
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <div class="card-body">
        <div class="table-responsive">
            <h3 style="text-align: center;">
                Customers List</h3>
            <table id="tblCustomers" datatable="ng" class="table table-bordered">
                <thead>
                    <tr>
                        <th>Customer Id</th>
                        <th>Name</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr dt-rows ng-repeat="m in Customers">
                        <td>{{m.Id}}</td>
                        <td>{{m.Name}}</td>
                        <td>{{m.Country}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

jQuery DataTable Paging Sorting Searching using AngularJS in ASP.Net MVC

Company

Explore

Follow us

Contact Us