在我們開發系統介面，包括Web和Winform的都一樣，主要的介面就是列表展示主介面，編輯檢視介面，以及一些輔助性的如匯入介面，選擇介面等，其中列表展示主介面是綜合性的資料展示介面，一般往往需要對記錄進行合理的分頁，整合各種增刪改查的按鈕等功能。隨著開發專案的需求變化，對資料記錄分頁展示、排序等功能都是常態的要求，因此在程式碼生成工具中調整了主列表介面的列表展示外掛為Bootstrap-table外掛，本篇隨筆主要介紹在程式碼生成工具Database2Sharp中整合對Bootstrap-table外掛的分頁及排序支援功能。

1、Web介面列表分頁處理

1）常規分頁方式

最開始的Web介面列表分頁，使用較為常規Bootstrap Paginator分頁模式，內容生成以HTML組合方式，先設定表頭，然後獲取分頁列表資料，遍歷生成相關的HTML資料，增加到頁面上，這種方式也是比較高效的處理方式，如我在本系列開始的隨筆《

 這種方式可控性非常好，而且可以對HTML程式碼進行完全的控制，非常適合在自定義介面中展示一些資料，如我之前介紹過的圖示分頁展示介面 一樣，完全是自定義的內容展示，圖示介面如下所示。

2）Bootstrap-table外掛分頁

使用常規的分頁方式介面可控性非常方便，不過隨著不同專案的一些特殊要求，對錶頭排序的需求也是非常強烈的，上面的分頁處理方式無法實現表頭的排序功能，因此引入了使用非常廣泛的Bootstrap-Table外掛，該外掛應用很廣、功能非常強大，可以通過屬性配置實現很細緻的功能控制。Bootstrap-table外掛提供了非常豐富的屬性設定，可以實現查詢、分頁、排序、複選框、設定顯示列、Card View檢視、主從表顯示、合併列、國際化處理等處理功能，而且該外掛同時也提供了一些不錯的擴充套件功能，如移動行、移動列位置等一些特殊的功能。

這個外掛最顯著的特點就是完美支援客戶端或者伺服器的資料列排序處理，單擊表頭就可以實現排序操作。

 2、在程式碼生成工具Database2Sharp中整合對Bootstrap-table外掛的分頁及排序支援

我們的程式碼生成工具Database2Sharp是為了框架開發服務的，不管是Winform還是Web開發，都可以基於資料庫的基礎上進行框架程式碼的快速生成，以及介面的程式碼生成，本次調整的程式碼生成工具功能，在列表介面程式碼中增加了對Bootstrap-table外掛分頁的支援，使得我們開發Bootstrap框架的介面程式碼更加豐富、快捷。

在程式碼生成工具Database2Sharp上，我們先使用Enterprise Library程式碼增量生成主體框架的框架程式碼。

然後在使用Bootstrap的Web介面程式碼生成功能，如下可以在工具欄介面中選擇。

選擇資料庫和表後，可以進行介面程式碼（包括控制器程式碼、檢視介面程式碼）兩部分，其中檢視分為兩種模式，一種是利用Bootstrap-table外掛的分頁及排序（index.cshtml），一種是常規的Bootstrap Paginator分頁處理（index2.cshtml）。

老客戶可以繼續使用index2.cshtml的樣式，也可以使用最新的Bootstrap-table外掛的分頁及排序方式（index.cshtml）。

生成的介面分為HTML部分和JS部分，都是比較緊密聯絡的兩部分，我們進行一定的調整即可實現豐富的介面排版。

部分的JS程式碼（展示分頁部分處理）如下所示。

列表資料的顯示列，預設是以資料庫的欄位進行生成，我們在生成後可以進行一定的調整，可以合理顯示我們關注的資料。

當然生成的介面程式碼還有很多其他的JS程式碼，如編輯、檢視的程式碼和控制元件對應，匯入、匯出等程式碼的處理，都是一併生成的，我們根據需要進行一定的裁剪調整即可完成整個介面的處理了，極大的提高開發效率。