在本文中，我们讨论了如何使用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在该表中显示数据。我们还学习了如何在表中实现排序，搜索和分页。
点击关注私信小编“资源”即可获得免费的学习资料。