在整個學(xué)生選課系統(tǒng)里面，最核心的就是選課頁面了。

我們設(shè)定目標(biāo)為：

1、已經(jīng)選修的課程，不能重復(fù)選修；

2、每個學(xué)生最多可選修不超過2門課程。

3、可選課程數(shù)量過多的時候，頁面自動分頁，每頁默認(rèn)最多顯示10條數(shù)據(jù)。

為了實現(xiàn)目標(biāo)，這里需要使用3個東西：

1、后端業(yè)務(wù)邏輯查詢數(shù)據(jù)庫，得出可以選修的課程，返回給前端頁面，前端頁面需要使用dataTable這個JS組件，實現(xiàn)即時搜索，自動分頁等功能。

2、點擊前端選修按鈕之后，會彈出確認(rèn)的框，這個要使用彈層。

3、彈出里面點擊確認(rèn)之后，JS使用post將信息返回到后端業(yè)務(wù)邏輯函數(shù)，將學(xué)生與需要選修的課程進(jìn)行連接并且寫入數(shù)據(jù)庫。

1、使用dataTable組件

首先，為了實現(xiàn)自動翻頁與即時搜索的功能，我們需要引用過一個js插件。在magic->組件庫->帶搜索表格，查看代碼可以找到j(luò)query.data.Tables.js與dataTables.bootstrap.js這個js插件，就是可以實現(xiàn)自動翻頁與即時搜素的關(guān)鍵。

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

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

urls添加路由，在數(shù)據(jù)庫表課程表里面手動增加內(nèi)容。

刷新前端temp頁面，這樣就可以實現(xiàn)展示后臺可以選修的課程數(shù)據(jù)了。

2、制作彈層&POST數(shù)據(jù)

我們創(chuàng)建獨立的JS文件，然后將JS的代碼拷貝到JS文件里面，并且創(chuàng)建函數(shù)。

然后html里面寫一個引用，引用該JS文件內(nèi)容。

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