先决条件

实现步骤

在数据库中创建表

创建一个新的Web API项目

创建ReactJS项目

安装react-bootstrap-table2

实现搜索

实现分页

摘要

在本文中，我们将学习如何在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应用
安装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并创建一个新项目。

将名称更改为MatUITable。

选择模板作为Web API。

在解决方案资源管理器中右键单击Models文件夹，然后转到Add >> New Item >> data。

单击“ADO.NET实体数据模型”选项，然后单击“添加”。

从数据库中选择EF Designer，然后单击“下一步”按钮。

添加连接属性，然后在下一页上选择数据库名称，然后单击“确定”。

选中“表格”复选框。默认情况下将选择内部选项。现在，单击“完成”按钮。

现在，我们的数据模型已成功创建。

右键单击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。转到工具，打开NuGet软件包管理器，搜索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表：

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('http://localhost:51760/Api/Emp/employee').then(response => {    console.log(response.data);    this.setState({    employee: response.data    });    });    }   render() {  return (

具有搜索和自定义分页的React Bootstrap表

<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('http://localhost: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('http://localhost: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('http://localhost: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('http://localhost: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' 运行项目并检查结果：

摘要

在本文中，我们学习了如何添加React Bootstrap Table以及如何在ReactJS应用程序中使用Web API在该表中显示数据。我们还学习了如何在表格中实现排序、搜索和分页。

具有搜索和自定义分页的React Bootstrap表相关推荐

tp3.2.3保持搜索条件的分页
一.背景之前用tp做顶部搜索,做完之后也没注意那么多.后来测试的时候才发现,点击分页的下一页,我们之前的搜索条件就没用了..这就有点不合适了,因此开始踩坑. 我这里用的是Post方式提交的搜索条件. ...
Laravel自定义分页样式
Laravel 的分页组件默认为 Bootstrap 的分页样式,但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样,这时我们需要自定义分页.其实 Laravel 的分页组件是 ...
自定义分页模板（银角大王版）
阅读目录当数据库中数据有很多,我们通常会在前端页面做分页展示. 分页的数据可以在前端页面实现,也可以在后端实现分页. 后端实现分页的原理就是每次只请求一页数据. 准备工作我们使用脚本批量创建一些测 ...
利用自定义分页技术提高数据库性能
利用自定义分页技术提高数据库性能孟宪会 2002-11-11 14:28:17 Web应用程序是显示数据库中数据的一个非常好的方法,通过它,你可以把业务复杂,并有访问和安全规则的数据库数据以一种简单 ...
Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...
Django—自定义分页
分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该显示在页面上的数据在数据库表中的起始位置. 确定分页需求: 1. 每页显示的数据条数 2. 每页显示页号链接数 3. 上一页 ...
基于layuiCMS2.0开发后台管理系统，实现自定义分页并动态加载数据表格的示例...
2019独角兽企业重金招聘Python工程师标准>>> 公司让做一个app基础数据管理后台系统,前端就以layuiCMS2.0为模板,拷贝到项目resources/static目录下 ...
Django 分页组件替换自定义分页
Django的分页器(paginator) 总之不太好用我们还是用自己的好一些自定义分页器分页实现源码 """ 自定义分页组件 """c ...
Cookie、Session和自定义分页
cookie Cookie的由来大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

具有搜索和自定义分页的React Bootstrap表

先决条件

实现步骤

在数据库中创建表

创建一个新的Web API项目

创建ReactJS项目

安装react-bootstrap-table2

实现搜索

实现分页

摘要

具有搜索和自定义分页的React Bootstrap表相关推荐

最新文章

热门文章