在整個學生選課系統里面，最核心的就是選課頁面了。

我們設定目標為：

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插件，就是可以實現自動翻頁與即時搜素的關鍵。

我們先建立一個temp.html用于測試（創建html，增加views函數，增加urls路由），然后拷貝代碼。

views里面使用的據實在之前已經說過了，就是使用OCM進行跨表的連接，跨表部分需要使用“外鍵__字段”來進行自動連接。

urls添加路由，在數據庫表課程表里面手動增加內容。

刷新前端temp頁面，這樣就可以實現展示后臺可以選修的課程數據了。

2、制作彈層&POST數據

我們創建獨立的JS文件，然后將JS的代碼拷貝到JS文件里面，并且創建函數。

然后html里面寫一個引用，引用該JS文件內容。

magicbox查找彈層，并且查看代碼，將cs與js引用拷貝，將