1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

var Post = {

    Url: function () {

        return "webAPI路径";

    },

    ///返回带分页信息

    //[ele]填充信息元素ID

    ///[ele2]填充分页元素ID

    //[tagName]信息元素一级元素名

    ///[tag2Name]信息元素二级元素名

    //[index]页码

    Pager: function (ele, ele2, tagName, tag2Name, index, where) {

        //页大小

        var size = $.cookie('pageSize') == undefined ? 10 : $.cookie('pageSize');

        //封装的Ajax

        Load(Post.Url(), {参数列表}, function (data) {<br data-filtered="filtered">　　　　　　  //展示数据

            $(ele).html(createHtml(data.rows, tagName, tag2Name));

            //设置分页信息

            $(ele2).attr('index', index).attr('rowcount', size).attr('total', data.total);

            //填充分页

            PagerTool(ele, ele2, Post, tagName, tag2Name, where);

        });

    }

}

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

///公共加载方法

//[turl]访问地址

///[postData]提交数据(标准post格式)

//[callback]回调函数(可匿名)

function Load(turl, postData, callback) {

    jQuery.support.cors = true;

    try {

        $.ajax({

            url: turl,

            timeout: 10000,

            type: "post",

            data: postData,

            success: function (data) {

                if (data != null) {

                    Json = eval("(" + data + ")");

                    callback(Json);

                }

            }

        });

    } catch (e) {

        Mbox.Show(e.message);

    }

}

///创建Html结构

//[data]数据源

///[tagName]一级元素标签名称

//[tag2Name]二级元素标签名称

function createHtml(data, tagName, tag2Name) {

    var Html = '';

    for (var i = 0; i < data.length; i++) {

        Html += `<${tagName}>`;

        $.each(data[i], function (i, v) {

            Html += `<${tag2Name}>${v}</${tag2Name}>`;

        });

        Html += `</${tagName}>`;

    }

    return Html;

}

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

//公共分页工具条

///[dataEle]数据主体

//[ele]分页主体

///[obj]被传入的类

//[where]条件

///[w]按照何种方式搜索

function PagerTool(dataEle, ele, obj, tag1, tag2, where) {

    var total = $(ele).attr('total') - 0;

    var rowcount = $(ele).attr('rowcount') - 0;

    var index = $(ele).attr('index') - 0;

    var count = total % rowcount == 0 ? total / rowcount : Math.floor(total / rowcount) + 1;

    var Html = '';

    Html += '<p class="page">';

    Html += '<a href="javaScript:void(0)" class="prePage">上一页</a>';

    for (var i = 1; i <= count; i++) {

        if (index != i) {

            Html += `<a href="javaScript:void(0)" class="nowPage">${i}</a>`;

        } else {

            Html += `<a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">${i}</a>`;

        }

    }

    Html += '<a href="javaScript:void(0)" class="nextPage">下一页</a>';

    Html += '</p>';

    $(ele).html('').html(Html);

    //上一页

    $(ele).find('a[class=prePage]').bind('click', function () {

        var index = $(this).parent().parent().attr('index') - 0;

        if (index > 1) {

            $(this).parent().parent().attr('index', index - 1);

            obj.Pager(dataEle, ele, tag1, tag2, index - 1, where);

        }

    });

    //下一页

    $(ele).find('a[class=nextPage]').bind('click', function () {

        var index = $(this).parent().parent().attr('index') - 0;

        if (index < count) {

            $(this).parent().parent().attr('index', index + 1);

            obj.Pager(dataEle, ele, tag1, tag2, index + 1, where);

        }

    });

    //当前页

    $(ele).find('a[class=nowPage]').bind('click', function () {

        var index = $(this).parent().parent().attr('index') - 0;

        $(this).parent().parent().attr('index', $(this).text());

        obj.Pager(dataEle, ele, tag1, tag2, $(this).text(), where);

    });

}

1

Post.Pager(testBox, pagerBox, 'ul', 'li', 1, `筛选数据的条件`);

1

<p class="page"><br data-filtered="filtered">    <a href="javaScript:void(0)" class="prePage">上一页</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">1</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nowPage">2</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nowPage">3</a><br data-filtered="filtered">    <a href="javaScript:void(0)" class="nextPage">下一页</a><br data-filtered="filtered"></p>