2

schangxiang@126.com

2024-08-16 b47c50a2a514def7374b32d7194b2c599cba5625

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div class="page-header">
    <h1>Intro</h1>
</div>
 
<div class="row">
 
    <div class="col col-lg-6">
        <div style="margin-top: 20px">
            <h3>Steps for getting started (example on right)</h3>
            <ol>
                <li>Add references to <a href="http://angularjs.org/" target="_blank">AngularJS</a>. EG:<br/>
<pre style="margin-top:10px" data-prettycode pretty-lang="html">
&lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"&gt;&lt;/script&gt;
</pre>
                </li>
                <li>Add references to <a href="https://github.com/esvit/ng-table/">ngTable</a>'s javascript and css files. EG:<br/>
<pre style="margin-top:10px" data-prettycode pretty-lang="html">
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css&quot;&gt;
&lt;script src="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.js"&gt;&lt;/script&gt;
</pre></li>
                <li>Where you declare your app module, add <code>ngTable</code>:<br>
<pre style="margin-top:10px" data-prettycode pretty-lang="js">
angular.module("myApp", ["ngTable"]);
</pre>
                </li>
                <li>In your html file within the controller where you plan to use <code>ng-table</code>, add:<br>
<pre style="margin-top:10px" data-prettycode pretty-lang="html">
&lt;table ng-table=&quot;vm.tableParams&quot; class=&quot;table&quot; show-filter=&quot;true&quot;&gt;
    &lt;tr ng-repeat=&quot;user in $data&quot;&gt;
        &lt;td title=&quot;'Name'&quot; filter=&quot;{ name: 'text'}&quot; sortable=&quot;'name'&quot;&gt;
            {{user.name}}&lt;/td&gt;
        &lt;td title=&quot;'Age'&quot; filter=&quot;{ age: 'number'}&quot; sortable=&quot;'age'&quot;&gt;
            {{user.age}}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</pre>
                </li>
                <li>In your javascript file within the controller where you plan to use <code>ng-table</code>, declare:<br> </li>
<pre style="margin-top:10px" data-prettycode pretty-lang="js">
var self = this;
var data = [{name: "Moroni", age: 50} /*,*/];
self.tableParams = new NgTableParams({}, { dataset: data});
</pre>
            </ol>
        </div>
    </div>
    <div class="col col-lg-6">
 
        <h3>Example</h3>
        <div>
 
            <table ng-table="vm.tableParams" class="table" show-filter="true">
                <tr ng-repeat="user in $data">
                    <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
                        {{user.name}}
                    </td>
                    <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
                        {{user.age}}
                    </td>
                </tr>
            </table>
        </div>
 
    </div>
 
</div>