demo/demo01.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>angular table</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../src/ourpalm-table.css">
</head>
<body>

<div class="container" ng-controller="DemoController as vm">
    <h1>hello angular ourpalm-table！</h1>
    <h2>服务器加载数据！</h2>

    <table ourpalm-table="vm.table" class="table table-bordered table-striped table-hover text-center">
        <tr ng-repeat="$row in $rows">
            <td table-column header="全选" field="select" checkbox="true" style="width:30px;"></td>
            <td table-column header="序号" field="number" rownumbers="true" style="width:40px;"></td>
            <td table-column header="姓名" field="name">{{$row.name}}</td>
            <td table-column header="年龄" field="age">{{$row.age}}</td>
            <td table-column header="邮箱" field="email">{{$row.email}}</td>
        </tr>
    </table>

</div>


<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script src="../ourpalm-table.js"></script>
<script>

    angular
        .module('app', ['ourpalm-table'])
        .controller('DemoController', function ($timeout, OurpalmTable) {
            var vm = this;

            vm.table = new OurpalmTable({
                loadData: function (table, callback) {
                    var options = table.getOptions();

                    var i = (options.currentPage - 1) * options.pageSize + 1;
                    var size = i + options.pageSize;
                    size = size > 86 ? 86 : size;
                    //构造服务器假数据
                    var rows = [];
                    for (; i < size; i++) {
                        rows.push({
                            name: `zhangsan${i}`,
                            age: i,
                            email: `zhangsan${i}@163.com`
                        });
                    }

                    $timeout(function () {
                        callback({
                            total: 86,
                            rows: rows
                        });
                    }, 300);
                }

            });
        });

    angular.bootstrap(document, ['app']);

</script>

</body>
</html>