在本文中，我們討論了如何使用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實體資料模型”選項，然後單擊“新增”。

新增連線屬性，然後在下一頁上選擇資料庫名稱，然後單擊“確定”。

現在，我們的資料模型已成功建立。

右鍵單擊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在該表中顯示資料。我們還學習了如何在表中實現排序，搜尋和分頁。