【问题标题】:angularjs pagination, sort, filter tableangularjs 分页、排序、过滤表
【发布时间】:2016-05-22 11:01:55
【问题描述】:

我在以下链接中找到了这个令人惊叹的 ngtable 示例:http://ng-table.com/#/loading/demo-managed-array

它可以在表格中执行以下所有操作:过滤、排序、分页

我似乎不知道如何在表格中的 js 中集成定义的数组。该代码没有显示在他们的示例中定义的任何数组。

我想在其中集成以下数组:

   $scope.detailsArray=[{'name':'Visited With','clicker':'visitedTab','date':'08-05-2016'},
 {'name':'Time (24 Hour)','clicker':'timeTab','date':'04-05-2016'}, 
 {'name':'Sampling','clicker':'samplingTab','date':'01-05-2016'}, 
 {'name':'Prescription Audit','clicker':'prescriptionTab','date':'12-05-2016'},
 {'name':'Brand Reminders','clicker':'bRemindersTab','date':'22-05-2016'},
 {'name':'Call Type','clicker':'calltypeTab','date':'14-05-2016'}];

我还想按日期对列进行排序。

我曾尝试整合 .他们允许在代码笔上进行编辑。但我未能整合它。如果有人设法集成它,请也提供代码。任何可以提供帮助的angularjs专家?将非常有帮助!提前谢谢您

【问题讨论】:

标签: javascript arrays angularjs pagination


【解决方案1】:

由于评论有限,我将其写为答案!

我成功了:

js:

(function() {
 "use strict";

  var app = angular.module("myApp", ["ngTable", "ngTableDemos"]);

   app.controller("demoController", demoController);
  demoController.$inject = ["NgTableParams", "ngTableSimpleList"];

  var dataset=[{'name':'Visited With','clicker':'visitedTab','date':'08-05-2016'},
{'name':'Time (24 Hour)','clicker':'timeTab','date':'04-05-2016'}, 
{'name':'Sampling','clicker':'samplingTab','date':'01-05-2011'}, 
{'name':'Prescription Audit','clicker':'prescriptionTab','date':'12-05-2016'},
{'name':'Brand Reminders','clicker':'bRemindersTab','date':'22-05-2016'},
{'name':'Call Type','clicker':'calltypeTab','date':'14-05-2015'}];
 var tp = new NgTableParams({}, { dataset: dataset });

function demoController(NgTableParams, simpleList) {
   var self = this;
   self.tableParams = new NgTableParams({}, {
    dataset: dataset
   });
 }
})();

html:

<div ng-app="myApp">
  <div ng-controller="demoController as demo">
    <h2 class="page-header">Loading data - managed array</h2>
    <div class="bs-callout bs-callout-info">
      <h4>Overview</h4>
      <p>When you have the <em>entire</em> dataset available in-memory you can hand this to <code>NgTableParams</code> to manage the filtering, sorting and paging of that array</p>
    </div>
    <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'}" sortable="'name'">{{row.name}}</td>
        <td data-title="'clicker'" filter="{clicker: 'text'}" sortable="'clicker'">{{row.clicker}}</td>
        <td data-title="'date'" filter="{date: 'date'}" sortable="'date'">{{row.date}}</td>
      </tr>
    </table>
  </div>
</div>

这是笔:http://codepen.io/anon/pen/WwVQeP?editors=1010

现在唯一的问题是日期排序!谁能找到解决办法?

【讨论】:

    猜你喜欢
    • 2018-01-13
    • 2014-09-22
    • 1970-01-01
    • 2018-06-22
    • 2023-03-18
    • 1970-01-01
    • 1970-01-01
    • 2017-01-26
    • 2013-02-19
    相关资源
    最近更新 更多