在本文中，我們討論瞭如何使用React Bootstrap Table以及添加分頁，搜索和排序。
介紹
在本文中，我們將學習如何在React應用程序中使用React Bootstrap Table。我還將在此表中說明如何實現分頁，搜索和排序。
先決條件
- 我們應該具備React.js和Web API的基礎知識。
- Visual Studio和Visual Studio Code IDE應該安裝在您的系統上。
- SQL Server管理Studio。
- Bootstrap和HTML的基本知識。
實施步驟
- 創建一個數據庫和表。
- 創建Asp.net Web API項目。
- 創建React App。
- 安裝React-bootstrap-table2
- 實現排序。
- 實施搜索。
- 實施自定義分頁。
- 安裝Bootstrap。
- 安裝Axios。
在數據庫中創建表
打開SQL Server Management Studio，創建一個名為“ Employee”的數據庫，然後在該數據庫中創建一個表。將該表命名為“ Employee”。
現在，在此表中添加一些演示數據。
創建一個新的Web API項目
打開Visual Studio並創建一個新項目。
將名稱更改為MatUITable。
選擇模板作為Web API。
在解決方案資源管理器中右鍵單擊Models文件夾，然後轉到Add >> New Item >> data。
單擊“ ADO.NET實體數據模型”選項，然後單擊“添加”。
從數據庫中選擇EF Designer，然後單擊“下一步”按鈕。
添加連接屬性，然後在下一頁上選擇數據庫名稱，然後單擊“確定”。
選中“表格”複選框。默認情況下將選擇內部選項。現在，單擊“完成”按鈕。
現在，我們的數據模型已成功創建。
右鍵單擊Controllers文件夾，然後添加一個新的控制器。將其命名為“ Employee controller”，並在Employee控制器中添加以下名稱空間。
現在，添加一種從數據庫中獲取數據的方法。
完整的員工控制器代碼
現在，讓我們啟用CORS。轉到工具，打開NuGet程序包管理器，搜索CORS，然後安裝“ Microsoft.Asp.Net.WebApi.Cors”程序包。打開Webapiconfig.cs並添加以下行。
創建一個ReactJS項目
現在，讓我們首先使用以下命令創建一個React應用程序。
使用以下命令安裝引導程序。
現在，打開index.js文件並添加Bootstrap參考。
現在，使用以下命令安裝Axios庫。瞭解有關Axios的更多信息。
使用以下命令安裝React Bootstrap表：
現在，右鍵單擊“ src”文件夾，然後添加一個名為“ Bootstraptab.js”的新組件。
現在，打開Bootstraptab.js組件並導入所需的參考。在此組件中添加以下代碼。通過運行項目npm start並檢查結果：
點擊按鈕檢查表中的排序
實施搜索
安裝以下庫以在此表中添加搜索。
現在，在此組件中添加以下代碼。
通過運行項目npm start並檢查結果：
實施分頁
安裝以下庫以在此表中添加分頁。
現在，在此組件中添加以下代碼。
通過運行項目npm start 並檢查結果：
默認情況下，每頁顯示10條記錄，因此讓我們創建一個添加自定義頁面大小的函數。在此組件中添加以下代碼並進行檢查。
使用“ npm start”運行項目並檢查結果。現在，創建一個新組件Bootstraptab1.js並在該組件中添加以下代碼：
現在，打開app.js文件並添加以下代碼：
通過運行項目npm start並檢查結果：
結尾
在本文中，我們學習瞭如何添加React Bootstrap Table以及如何在ReactJS應用程序中使用Web API在該表中顯示數據。我們還學習瞭如何在表中實現排序，搜索和分頁。
閱讀更多 一名小白人員 的文章
