用layui插件将查询的数据绑定到页面

                         用layui插件将查询的数据绑定到页面

    在做项目中，我们不单单是做页面的布局，而更多的是对数据进行操作，例如将数据绑定到页面、新增数据、删除数据、修改数据。这可以我们编程需要进行的最多的操作，增、删、查、改。

    我下面的是将查询出来的数据绑定到页面上去。我借用的是layui插件来进行一个数据表格的绑定。所有我们第一步是引用layui插件。

    第二步：进行数据的查询查出你需要还页面上显示的数据

第三步：进行表格的渲染，下面是JS代码。

    <script>

        var layer, layuiTable;//保存layui模块以便全局使用

        var tabteacher;//表格

        $(function () {

            layui.use(['table', 'layer'], function () {

                //赋值

                layer = layui.layer, layuiTable = layui.table;

                //执行渲染

                tabteacher = layuiTable.render({

                    elem: "#tabteacher",//指定要渲染的表格的id

                    url:"selectTeacher", //数据接口

                    cols: [[

                        { type: 'checkbox', fixed: 'left' },

                        { type: 'numbers', title: '序号' },

                        { field: 'TeacherName', title: '姓名' },

                        { field: 'TeacherSex', title: '性别'},

                        { field: 'TeacherIDNum', title: '身份证号' },

                        { field: 'TeacherNumber', title: '编号' },

                        { field: 'ContactNumber', title: '联系电话' },

                        { field: 'AcademeName', title: '学院' },

                        { field: 'AppellationName', title: '职称'},

                        { field: 'ResearchSectionName', title: '教研室名' },

                    ]],

                    page: {//分页按钮

                        limit: 10, //指定每页显示的条数

                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50], //每页条数的选择项

                    }

                });

            })

        })

    </script>

注意：field的值要和要和我们查出来的数据的字段要一直要不数据会绑定不到页面，url不能写错，写错会报404。

效果图：

表格数据的绑定无非就是几个步骤，第一引用插件，第二查出数据和对数据进行一个分割，第三渲染数据表格，第四将数据进行绑定。所有的查询都大致相同，不相同的只有查询的数据不一样而已，其他几乎相同，这个就是数据的绑定。

这是我对数据绑定的一些看法和总结，有什么不对的请指出。