<link rel="stylesheet" type="text/css" href="./MyPaging.css">//引入MyPaging.css
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>//引入jquery
<script src="./MyPaging.js"></script>//引入MyPaging.js

<div class="main">
     <table border>
         <thead>
               <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>  
                </tr>
         </thead>
          <tbody class="tbody">
                <tr>
                    <td>1</td>
                    <td>会计师看到</td>
                    <td>50</td>
                </tr>
           </tbody>
       </table>
        <div class="box2" id="box2"></div>
        <br>
        <button class="jumpBtn">跳到第一页</button>
        <br><br>
        <input type="text" id="searchIpt">
        <button id="searchBtn">搜索</button>
</div>

function getData(params) {
            var data = [
               {id: 1, name: '小李', age: 10},
                {id: 2, name: '校长', age: 23},
                {id: 3, name: '小王', age: 12},
                {id: 4, name: '李勇', age: 23},
                {id: 5, name: '红旗', age: 44},
                {id: 6, name: '跳转', age: 12},
                {id: 7, name: '我骄傲', age: 22},
                {id: 8, name: '阿萨的', age: 43},
                {id: 9, name: '绕太阳', age: 15},
                {id: 10, name: '山地车', age: 18},
                {id: 11, name: '哈哈哈', age: 32},
                {id: 12, name: '求气球', age: 51},
                {id: 13, name: '哦怕', age: 23},
                {id: 14, name: '撒旦', age: 28},
                {id: 15, name: '农村', age: 36},
                {id: 16, name: '特否', age: 46},
                {id: 17, name: '预先', age: 31},
                {id: 18, name: '才不会', age: 31},
                {id: 19, name: '成交价', age: 31},
                {id: 20, name: '阿松', age: 18},
                {id: 21, name: '无法', age: 32},
                {id: 22, name: '英语', age: 51},
                {id: 23, name: '因为往', age: 23},
                {id: 24, name: '伟大', age: 28},
            ]
            var res = [];
            for (var i = 0; i < data.length; i++) {
                if (data[i].name.indexOf(params.search) != -1) {
                    res.push(data[i]);
                }
            }
            return {
                total: res.length,
                list: res.splice( (params.current - 1) * params.size, params.size )
            }
        }

var oPage = {
            search: '', // 搜索条件
            current: 1, // 当前页
            size: 4,    // 每页显示多少条
            paging: null, // 分页对象
            init: function () {
                this.setPaging(); // 初始化分页对象并调用loadData方法
                this.initEvent(); // 绑定事件
            },    
            // 初始化事件
            initEvent: function () {
                var _this = this;
                // 调到第一页点击
                $('.jumpBtn').on('click', function () {
                    _this.paging.setCurrent(1);
                })
                // 搜索按钮点击
                $('#searchBtn').on('click', function () {
                    _this.search = $('#searchIpt').val();
                    // 设置当前页，会触发jump方法
                    _this.paging.setCurrent(1);
                })
            },
            // 发送ajax获取数据
            loadData: function () {
                var _this = this;
                var params = {
                    search: this.search,
                    current: this.current,
                    size: this.size
                }
                // 模拟ajax获取数据
                setTimeout(function () {
                    var res = getData(params);
                    // 设置tbody的html
                    _this.setTbody(res.list);
                    // 必须调用 设置分页对象总页数
                    _this.paging.setTotal(res.total);
                }, 100);
            },
            // 创建分页对象
            setPaging: function () {
                var _this = this;
                this.paging = new MyPaging('#box2', {
                    size: this.size,
                    sizes: [1, 2, 4, 10, 20, 100],    // 选择每页条数
                    total: 0,
                    current: this.current,
                    prevHtml: '上一页',
                    nextHtml: '下一页',
                    layout: 'total, totalPage, sizes, prev, pager, next, jumper',
                    jump: function () {
                        _this.current = this.current; // 设置当前页
                        _this.size = this.size; // 设置当前每页多少条
                        // 点击页数按钮都会调用
                        _this.loadData();
                    }
                });
            },
            // 设置tbody的html
            setTbody: function (arr) {
                var html = '';
                for (var i = 0; i < arr.length; i++) {
                    var item = arr[i];
                    html += '<tr><td>' + item.id + '</td><td>' + item.name + '</td><td>' + item.age + '</td></tr>';
                }
                $('.tbody').html(html);
            }
        }