Angularjs ng-table plug-in Settings ordering _angularjs

Basic concepts

Ng-table provides a table header to provide basic filtering information:

(1) Specify a column of filters, and then the template will be used.
(2) ngtable supports number, text, select, and select-multiple value templates.
(3) may have the choice to provide the initial filter value for the Ngtableparams.

<div class = "row">
 <div class = "col-md-6" ng-controller = "demoController as demo">
  <h3> ngTable directive </ h3>
  <table ng-table = "demo.tableParams" class = "table table-condensed table-bordered table-striped">
  <tr ng-repeat = "row in $ data">
   <td data-title = "'Name'" filter = "{name: 'text'}"> {{row.name}} </ td>
   <td data-title = "'Age'" filter = "{age: 'number'}"> {{row.age}} </ td>
   <td data-title = "'Money'"> {{row.money}} </ td>
   <td data-title = "'Country'" filter = "{country: 'select'}" filter-data = "demo.countries"> {{row.country}} </ td>
  </ tr>
  </ table>
 </ div>
 <div class = "col-md-6" ng-controller = "dynamicDemoController as demo">
  <h3> ngTableDynamic directive </ h3>
  <table ng-table-dynamic = "demo.tableParams with demo.cols" class = "table table-condensed table-bordered table-striped">
  <tr ng-repeat = "row in $ data">
   <td ng-repeat = "col in $ columns"> {{row [col.field]}} </ td>
  </ tr>
  </ table>
 </ div>
 </ div>
(function () {
 "use strict";
 var app = angular.module ("myApp", ["ngTable", "ngTableDemos"]);
 app.controller ("demoController", demoController);
 demoController. $ inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];
 // Inject NgTableParams (ngtablemodule) and ngTableSimpleMediumList, ngTableDemoCountries two data sources
 function demoController (NgTableParams, simpleList, countries) {
 this.countries = countries; // Initialize the data source of selcet
 this.tableParams = new NgTableParams ({
  // initial filter
  filter: {name: "T"} // Initial filter condition
 }, {
  dataset: simpleList
 });
 }


 app.controller ("dynamicDemoController", dynamicDemoController);

 dynamicDemoController. $ inject = ["NgTableParams", "ngTableSimpleMediumList", "ngTableDemoCountries"];

 function dynamicDemoController (NgTableParams, simpleList, countries) {
 this.cols = [// Custom table entry, filter condition, table header name and data source, filterData: countries.
  {field: "name", title: "Name", filter: {name: "text"}, show: true},
  {field: "age", title: "Age", filter: {age: "number"}, show: true},
  {field: "money", title: "Money", show: true},
  {field: "country", title: "Country", filter: {country: "select"}, filterData: countries, show: true}
 ];

 this.tableParams = new NgTableParams ({
  // initial filter
  filter: {country: "Ecuador"} // Initialize the data source
 }, {
  dataset: simpleList
 });
 }
}) ();


(function () {
 "use strict";

 angular.module ("myApp"). run (setRunPhaseDefaults);
 setRunPhaseDefaults. $ inject = ["ngTableDefaults"];
// Set the number of tables through config
 function setRunPhaseDefaults (ngTableDefaults) {
 ngTableDefaults.params.count = 5;
 ngTableDefaults.settings.counts = [];
 }
}) (); 

The above is the Angularjs ng-table plug-in data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!