您的位置: 首页  >  文章  >  BootStrap的table技术小结：数据填充、分页、列宽可拖动

BootStrap的table技术小结：数据填充、分页、列宽可拖动

分类: 文章 • 2023-12-12 20:48:22

本文结构：先说明，后代码。拷贝可直接运行。

一、demo结构：

BootStrap的table技术小结：数据填充、分页、列宽可拖动

二、文件引入

　　这些里面除了下面2个比较难找，其他的都很好找

　　bootstrap-table-resizable.js

　　colResizable-1.6.min.js

　　注意：需要将bootstrap-table.js中参数改为resizable: true

三、模拟的message.json数据准备

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

[

    {

        "name":"zhangsan1",

        "password":"1"

    },

    {

        "name":"zhangsan2",

        "password":"2"

    },

    {

        "name":"zhangsan3",

        "password":"3"

    },

    {

        "name":"zhangsan4",

        "password":"4"

    },

    {

        "name":"zhangsan5",

        "password":"5"

    },

    {

        "name":"zhangsan1",

        "password":"1"

    },

    {

        "name":"zhangsan2",

        "password":"2"

    },

    {

        "name":"zhangsan3",

        "password":"3"

    },

    {

        "name":"zhangsan4",

        "password":"4"

    },

    {

        "name":"zhangsan5",

        "password":"5"

    },

    {

        "name":"zhangsan1",

        "password":"1"

    },

    {

        "name":"zhangsan2",

        "password":"2"

    },

    {

        "name":"zhangsan3",

        "password":"3"

    },

    {

        "name":"zhangsan4",

        "password":"4"

    },

    {

        "name":"zhangsan5",

        "password":"5"

    }

]

 四、table.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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>BootStrap Table使用</title>

        <meta name="viewport" content="width=device-width" />

        <SCRIPT SRC="JS/JQUERY-3.3.1.MIN.JS" TYPE="TEXT/JAVASCRIPT"></SCRIPT>

        <script src="js/bootstrap-table.js"></script>

        <script src="js/bootstrap.min.js"></script>

        <script src="js/bootstrap-table-resizable.js"></script>

        <script src="js/colResizable-1.6.min.js"></script>

        <link href="js/bootstrap.min.css" rel="stylesheet" />

        <link href="js/bootstrap-table.css" rel="stylesheet" />

    </head>

    <body>

        <div class="container">

            <table id="table" class="table-bordered"></table>

        </div>

        <script type="text/javascript">

             $('#table').bootstrapTable({

                pagination:true,

                search:true,

                url:'/bootstrap_Table_resizable/json/message.json',

                columns:[{

                    field:'name',

                    title:'姓名'

                },{

                    field:'password',

                    title:'密码'

                }]

             })

        </script>

    </body>

</html>

 五、效果展示

BootStrap的table技术小结：数据填充、分页、列宽可拖动

 

如果我写的哪里有问题，欢迎补充

相关推荐