React Bootstrap Table，支持搜索和自定义分页
4.00/5 (1投票)
如何在 React 应用程序中使用 React Bootstrap Table
必备组件
- React.js 和 Web API 的基本知识
- 您的系统上应安装 Visual Studio 和 Visual Studio Code IDE
- SQL Server Management Studio
- Bootstrap 和 HTML 的基本知识
实施步骤
- 创建数据库和表
- 创建 ASP.NET Web API 项目
- 创建 React App
- 安装 React-bootstrap-table2
- 实现排序
- 实现搜索
- 实现自定义分页
- 安装 Bootstrap
- 安装 Axios
在数据库中创建表
打开 SQL Server Management Studio，创建一个名为 "Employee" 的数据库，并在该数据库中创建一个表。 将该表命名为 "Employee"。
CREATE TABLE [dbo].[Employee](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](50) NULL,
[Age] [int] NULL,
[Address] [varchar](50) NULL,
[City] [varchar](50) NULL,
[ContactNum] [varchar](50) NULL,
[Salary] [decimal](18, 0) NULL,
[Department] [varchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
现在在此表中添加一些演示数据。
创建新的 Web API 项目
打开 Visual Studio 并创建一个新项目。
打开 Visual Studio 并创建一个新项目。
将名称更改为 MatUITable。
选择模板作为 Web API。
右键单击解决方案资源管理器中的 Models 文件夹，然后转到 Add >> New Item >> data。
单击 "ADO.NET Entity Data Model" 选项，然后单击 "Add"。
从数据库中选择 EF Designer，然后单击 "Next" 按钮。
添加连接属性并在下一页选择数据库名称，然后单击确定。
选中 "Table" 复选框。 默认情况下将选择内部选项。 现在，单击 "Finish" 按钮。
现在，我们的数据模型已成功创建。
右键单击 Controllers 文件夹，然后添加一个新控制器。 将其命名为 "Employee controller"，并在 Employee 控制器中添加以下命名空间。
using MatUITable.Models;
现在添加一个从数据库中提取数据的方法。
[HttpGet]
[Route("employee")]
public object Getrecord()
{
var emp = DB.Employees.ToList();
return emp;
}
完整的 Employee 控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MatUITable.Models;
namespace MatUITable.Controllers
{
[RoutePrefix("Api/Emp")]
public class EmployeeController : ApiController
{
EmployeeEntities DB = new EmployeeEntities();
[HttpGet]
[Route("employee")]
public object Getrecord()
{
var emp = DB.Employees.ToList();
return emp;
}
}
}
现在，让我们启用 CORS。 转到 Tools，打开 NuGet Package Manager，搜索 CORS，并安装 "Microsoft.Asp.Net.WebApi.Cors" 包。 打开 Webapiconfig.cs 并添加以下行
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
创建 ReactJS 项目
现在，让我们首先使用以下命令创建一个 React 应用程序
npx create-react-app matform
使用以下命令安装 bootstrap
npm install --save bootstrap
现在，打开 index.js 文件并添加 Bootstrap 引用。
import 'bootstrap/dist/css/bootstrap.min.css';
现在，使用以下命令安装 Axios 库。 了解有关 Axios 的更多信息。
npm install --save axios
安装 react-bootstrap-table2
使用以下命令安装 react bootstrap table
npm install react-bootstrap-table-next --save
现在，右键单击 "src" 文件夹，并添加一个名为 'Bootstraptab.js' 的新组件。
现在打开 Bootstraptab.js 组件并导入所需引用。 在此组件中添加以下代码。
import React, { Component } from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
export class Bootstraptab extends Component {
state = {
employee: [],
columns: [{
dataField: 'Id',
text: 'Id'
},
{
dataField: 'Name',
text: 'Name',
sort:true
}, {
dataField: 'Age',
text: 'Age',
sort: true
},
{
dataField: 'Address',
text: 'Address',
sort: true
},
{
dataField: 'City',
text: 'City',
sort: true
},
{
dataField: 'ContactNum',
text: 'ContactNum',
sort: true
},
{
dataField: 'Salary',
text: 'Salary',
sort: true
},
{
dataField: 'Department',
text: 'Department',
sort: true
}]
}
componentDidMount() {
axios.get('https://:51760/Api/Emp/employee').then(response => {
console.log(response.data);
this.setState({
employee: response.data
});
});
}
render() {
return (
使用搜索和自定义分页的 React Bootstrap Table
<bootstraptable data="{" hover="" keyfield="id" striped="" this.state.employee="">
) } } export default Bootstraptab
使用 'npm start' 运行项目并检查结果
单击按钮以检查表格中的排序。
实现搜索
安装以下库以在此表中添加搜索。
npm install react-bootstrap-table2-filter --save
现在在此组件中添加以下代码
import React, { Component } from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
export class Bootstraptab extends Component {
state = {
employee: [],
columns: [{
dataField: 'Id',
text: 'Id'
},
{
dataField: 'Name',
text: 'Name',
filter: textFilter()
}, {
dataField: 'Age',
text: 'Age',
sort: true
},
{
dataField: 'Address',
text: 'Address',
sort: true
},
{
dataField: 'City',
text: 'City',
sort: true
},
{
dataField: 'ContactNum',
text: 'ContactNum',
sort: true
},
{
dataField: 'Salary',
text: 'Salary',
sort: true
},
{
dataField: 'Department',
text: 'Department',
sort: true
}]
}
componentDidMount() {
axios.get('https://:51760/Api/Emp/employee').then(response => {
console.log(response.data);
this.setState({
employee: response.data
});
});
}
render() {
return (
使用搜索和自定义分页的 React Bootstrap Table
<bootstraptable data="{" hover="" keyfield="id" striped="" this.state.employee="">
) } } export default Bootstraptab
使用 'npm start' 运行项目并检查结果。
实现分页
安装以下库以在此表中添加分页。
npm install react-bootstrap-table2-paginator --save
现在在此组件中添加以下代码。
import React, { Component } from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
import paginationFactory from 'react-bootstrap-table2-paginator';
export class Bootstraptab extends Component {
state = {
employee: [],
columns: [{
dataField: 'Id',
text: 'Id'
},
{
dataField: 'Name',
text: 'Name',
}, {
dataField: 'Age',
text: 'Age',
sort: true
},
{
dataField: 'Address',
text: 'Address',
sort: true
},
{
dataField: 'City',
text: 'City',
sort: true
},
{
dataField: 'ContactNum',
text: 'ContactNum',
sort: true
},
{
dataField: 'Salary',
text: 'Salary',
sort: true
},
{
dataField: 'Department',
text: 'Department',
sort: true
}]
}
componentDidMount() {
axios.get('https://:51760/Api/Emp/employee').then(response => {
console.log(response.data);
this.setState({
employee: response.data
});
});
}
render() {
return (
使用搜索和自定义分页的 React Bootstrap Table
<bootstraptable data="{" hover=""
keyfield="id" striped="" this.state.employee="">
) } } export default Bootstraptab
使用 'npm start' 运行项目并检查结果。
默认情况下，它每页显示 10 条记录，因此让我们创建一个函数来添加自定义页面大小。 在此组件中添加以下代码并检查。
import React, { Component } from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
import paginationFactory from 'react-bootstrap-table2-paginator';
export class Bootstraptab extends Component {
state = {
employee: [],
columns: [{
dataField: 'Id',
text: 'Id'
},
{
dataField: 'Name',
text: 'Name',
}, {
dataField: 'Age',
text: 'Age',
sort: true
},
{
dataField: 'Address',
text: 'Address',
sort: true
},
{
dataField: 'City',
text: 'City',
sort: true
},
{
dataField: 'ContactNum',
text: 'ContactNum',
sort: true
},
{
dataField: 'Salary',
text: 'Salary',
sort: true
},
{
dataField: 'Department',
text: 'Department',
sort: true
}]
}
componentDidMount() {
axios.get('https://:51760/Api/Emp/employee').then(response => {
console.log(response.data);
this.setState({
employee: response.data
});
});
}
render() {
const options = {
page: 2,
sizePerPageList: [ {
text: '5', value: 5
}, {
text: '10', value: 10
}, {
text: 'All', value: this.state.employee.length
} ],
sizePerPage: 5,
pageStartIndex: 0,
paginationSize: 3,
prePage: 'Prev',
nextPage: 'Next',
firstPage: 'First',
lastPage: 'Last',
};
return (
使用搜索和自定义分页的 React Bootstrap Table
<bootstraptable data="{" hover="" keyfield="id" striped="" this.state.employee="">
) } } export default Bootstraptab
使用 'npm start' 运行项目并检查结果
现在创建一个新组件 Bootstraptab1.js 并在该组件中添加以下代码
import React, { Component } from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import axios from 'axios';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import paginationFactory from 'react-bootstrap-table2-paginator';
export class Bootstraptab1 extends Component {
state = {
products: [],
columns: [{
dataField: 'Id',
text: 'Id'
},
{
dataField: 'Name',
text: 'Name',
filter: textFilter()
}, {
dataField: 'Age',
text: 'Age',
sort: true
},
{
dataField: 'Address',
text: 'Address',
sort: true
},
{
dataField: 'City',
text: 'City',
sort: true
},
{
dataField: 'ContactNum',
text: 'ContactNum',
sort: true
},
{
dataField: 'Salary',
text: 'Salary',
sort: true
},
{
dataField: 'Department',
text: 'Department',
sort: true
}]
}
componentDidMount() {
axios.get('https://:51760/Api/Emp/employee').then(response => {
console.log(response.data);
this.setState({
products: response.data
});
});
}
render() {
const options = {
page: 2,
sizePerPageList: [ {
text: '5', value: 5
}, {
text: '10', value: 10
}, {
text: 'All', value: this.state.products.length
} ],
sizePerPage: 5,
pageStartIndex: 0,
paginationSize: 3,
prePage: 'Prev',
nextPage: 'Next',
firstPage: 'First',
lastPage: 'Last',
paginationPosition: 'top'
};
return (
使用搜索和自定义分页的 React Bootstrap Table
<bootstraptable data="{" hover=""
keyfield="id" striped="" this.state.products="">
) } } export default Bootstraptab1
现在打开 app.js 文件并添加以下代码
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Bootstraptab1 from './Bootstraptab1';
function App() {
return (
<bootstraptab1>
); } export default App;
使用 'npm start' 运行项目并检查结果
摘要
在本文中，我们学习了如何在 ReactJS 应用程序中添加 React Bootstrap Table，并使用 Web API 在该表中显示数据。 我们还学习了如何在表中实现排序、搜索和分页。
历史
- 2020年2月29日：初始版本