在整个学生选课系统里面，最核心的就是选课页面了。

我们设定目标为：

1、已经选修的课程，不能重复选修；

2、每个学生最多可选修不超过2门课程。

3、可选课程数量过多的时候，页面自动分页，每页默认最多显示10条数据。

为了实现目标，这里需要使用3个东西：

1、后端业务逻辑查询数据库，得出可以选修的课程，返回给前端页面，前端页面需要使用dataTable这个JS组件，实现即时搜索，自动分页等功能。

2、点击前端选修按钮之后，会弹出确认的框，这个要使用弹层。

3、弹出里面点击确认之后，JS使用post将信息返回到后端业务逻辑函数，将学生与需要选修的课程进行连接并且写入数据库。


1、使用dataTable组件

首先，为了实现自动翻页与即时搜索的功能，我们需要引用过一个js插件。在magic->组件库->带搜索表格，查看代码可以找到jquery.data.Tables.js与dataTables.bootstrap.js这个js插件，就是可以实现自动翻页与即时搜素的关键。

【实战演练】Python+Django网站开发系列09-django学生选课系统-选课页面_第1张图片

【实战演练】Python+Django网站开发系列09-django学生选课系统-选课页面_第2张图片

我们先建立一个temp.html用于测试（创建html，增加views函数，增加urls路由），然后拷贝代码。


        $(() {
            $().dataTable({
                lengthMenu: [],
                paging: ,ordering: ,searching: ,language: {
                    lengthMenu: + + + + + + + ,search: ,paginate: {previous: ,
                        next: ,
                        first: ,
                        last: },

                    zeroRecords: ,info: ,infoEmpty: ,infoFiltered: },
                paging: ,
                pagingType: ,});
            $().css({ width: });});
    

views里面使用的据实在之前已经说过了，就是使用OCM进行跨表的连接，跨表部分需要使用“外键__字段”来进行自动连接。

urls添加路由，在数据库表课程表里面手动增加内容。

【实战演练】Python+Django网站开发系列09-django学生选课系统-选课页面_第3张图片

刷新前端temp页面，这样就可以实现展示后台可以选修的课程数据了。

【实战演练】Python+Django网站开发系列09-django学生选课系统-选课页面_第4张图片

2、制作弹层&POST数据

我们创建独立的JS文件，然后将JS的代码拷贝到JS文件里面，并且创建函数。

1003.png

然后html里面写一个引用，引用该JS文件内容。

magicbox查找弹层，并且查看代码，将cs与js引用拷贝，将