Вступление
В этой статье мы узнаем, как использовать React Bootstrap Table в приложениях React. Я также объясню, как мы можем реализовать разбиение на страницы, поиск и сортировку в этой таблице.
Предпосылки
- Мы должны иметь базовые знания о React.js и веб-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, создайте базу данных с именем «Сотрудник» и в этой базе данных создайте таблицу. Дайте этой таблице имя типа «Сотрудник».
C #
xxxxxxxxxx
1
CREATE TABLE [dbo].[Employee](
2
[Id] [int] IDENTITY(1,1) NOT NULL,
3
[Name] [varchar](50) NULL,
4
[Age] [int] NULL,
5
[Address] [varchar](50) NULL,
6
[City] [varchar](50) NULL,
7
[ContactNum] [varchar](50) NULL,
8
[Salary] [decimal](18, 0) NULL,
9
[Department] [varchar](50) NULL,
10
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
11
(
12
[Id] ASC
13
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
14
) ON [PRIMARY]
15
GO
Теперь добавьте некоторые демонстрационные данные в эту таблицу.
Создать новый проект веб-API
Откройте Visual Studio и создайте новый проект.
Измените имя на MatUITable.
Выберите шаблон в качестве веб-API.
Щелкните правой кнопкой мыши папку «Модели» в обозревателе решений и выберите « Добавить» >> «Новый элемент» >> «Данные» .
Нажмите на «ADO.NET Entity Data Model» и нажмите «Добавить».
Выберите EF Designer из базы данных и нажмите кнопку «Далее».
Добавьте свойства соединения, выберите имя базы данных на следующей странице и нажмите OK.
Проверьте флажок «Таблица». Внутренние параметры будут выбраны по умолчанию. Теперь нажмите кнопку «Готово».
Теперь наша модель данных успешно создана.
Щелкните правой кнопкой мыши папку «Контроллеры» и добавьте новый контроллер. Назовите его «Контроллер сотрудника» и добавьте следующее пространство имен в контроллер «Сотрудник».
C #
xxxxxxxxxx
1
using MatUITable.Models;
Теперь добавьте метод для извлечения данных из базы данных.
C #
xxxxxxxxxx
1
[HttpGet]
2
[Route("employee")]
3
public object Getrecord()
4
{
5
var emp = DB.Employees.ToList();
6
return emp;
7
}
Полный код контроллера сотрудника
C #
xxxxxxxxxx
1
using System;
2
using System.Collections.Generic;
3
using System.Linq;
4
using System.Net;
5
using System.Net.Http;
6
using System.Web.Http;
7
using MatUITable.Models;
8
namespace MatUITable.Controllers
9
{
10
11
[RoutePrefix("Api/Emp")]
12
public class EmployeeController : ApiController
13
{
14
EmployeeEntities DB = new EmployeeEntities();
15
[HttpGet]
16
[Route("employee")]
17
public object Getrecord()
18
19
{
20
var emp = DB.Employees.ToList();
21
return emp;
22
}
23
}
24
}
Теперь давайте включим CORS. Зайдите в Инструменты, откройте диспетчер пакетов NuGet, найдите CORS и установите пакет «Microsoft.Asp.Net.WebApi.Cors». Откройте Webapiconfig.cs и добавьте следующие строки.
C #
xxxxxxxxxx
1
EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
2
config.EnableCors(cors);
Создать проект ReactJS
Теперь давайте сначала создадим приложение React с помощью следующей команды.
Оболочка
xxxxxxxxxx
1
npx create-react-app matform
Установите загрузчик с помощью следующей команды.
Оболочка
xxxxxxxxxx
1
npm install --save bootstrap
Теперь откройте файл index.js и добавьте ссылку Bootstrap.
JavaScript
xxxxxxxxxx
1
import 'bootstrap/dist/css/bootstrap.min.css';
Теперь установите библиотеку Axios с помощью следующей команды. Узнайте больше об Axios .
Оболочка
xxxxxxxxxx
1
npm install --save axios
Установите таблицу React Bootstrap с помощью следующей команды:
Оболочка
xxxxxxxxxx
1
npm install react-bootstrap-table-next --save
Теперь щелкните правой кнопкой мыши на папке «src» и добавьте новый компонент с именем «Bootstraptab.js».
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import BootstrapTable from 'react-bootstrap-table-next';
3
import axios from 'axios';
4
export class Bootstraptab extends Component {
5
state = {
6
employee: [],
7
columns: [{
8
dataField: 'Id',
9
text: 'Id'
10
},
11
{
12
dataField: 'Name',
13
text: 'Name',
14
sort:true
15
}, {
16
dataField: 'Age',
17
text: 'Age',
18
sort: true
19
},
20
{
21
dataField: 'Address',
22
text: 'Address',
23
sort: true
24
},
25
{
26
dataField: 'City',
27
text: 'City',
28
sort: true
29
},
30
{
31
dataField: 'ContactNum',
32
text: 'ContactNum',
33
sort: true
34
},
35
{
36
dataField: 'Salary',
37
text: 'Salary',
38
sort: true
39
},
40
{
41
dataField: 'Department',
42
text: 'Department',
43
sort: true
44
}]
45
}
46
componentDidMount() {
47
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
48
console.log(response.data);
49
this.setState({
50
employee: response.data
51
});
52
});
53
}
54
render() {
55
return (
56
<div className="container">
57
<div class="row" className="hdr">
58
<div class="col-sm-12 btn btn-info">
59
React Bootstrap Table with Searching and Custom Pagination
60
</div>
61
</div>
62
<div style={{ marginTop: 20 }}>
63
<BootstrapTable
64
striped
65
hover
66
keyField='id'
67
data={ this.state.employee }
68
columns={ this.state.columns } ></BootstrapTable>
69
</div>
70
</div>
71
)
72
}
73
}
74
75
export default Bootstraptab
Теперь откройте компонент Bootstraptab.js и импортируйте необходимую ссылку. Добавьте следующий код в этот компонент. Запустите проект с помощью npm startи проверьте результат:
Нажмите на кнопку, чтобы проверить сортировку в таблице
Реализация поиска
Установите следующую библиотеку, чтобы добавить поиск в эту таблицу.
JavaScript
xxxxxxxxxx
1
npm install react-bootstrap-table2-filter --save
Теперь добавьте следующий код в этот компонент.
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import BootstrapTable from 'react-bootstrap-table-next';
3
import axios from 'axios';
4
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
5
export class Bootstraptab extends Component {
6
state = {
7
employee: [],
8
columns: [{
9
dataField: 'Id',
10
text: 'Id'
11
},
12
{
13
dataField: 'Name',
14
text: 'Name',
15
filter: textFilter()
16
}, {
17
dataField: 'Age',
18
text: 'Age',
19
sort: true
20
},
21
{
22
dataField: 'Address',
23
text: 'Address',
24
sort: true
25
},
26
{
27
dataField: 'City',
28
text: 'City',
29
sort: true
30
},
31
{
32
dataField: 'ContactNum',
33
text: 'ContactNum',
34
sort: true
35
},
36
{
37
dataField: 'Salary',
38
text: 'Salary',
39
sort: true
40
},
41
{
42
dataField: 'Department',
43
text: 'Department',
44
sort: true
45
}]
46
}
47
componentDidMount() {
48
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
49
console.log(response.data);
50
this.setState({
51
employee: response.data
52
});
53
});
54
}
55
render() {
56
return (
57
<div className="container">
58
<div class="row" className="hdr">
59
<div class="col-sm-12 btn btn-info">
60
React Bootstrap Table with Searching and Custom Pagination
61
</div>
62
</div>
63
<div style={{ marginTop: 20 }}>
64
<BootstrapTable
65
striped
66
hover
67
keyField='id'
68
data={ this.state.employee }
69
columns={ this.state.columns }
70
filter={ filterFactory() } />
71
</div>
72
</div>
73
)
74
}
75
}
76
77
export default Bootstraptab
Запустите проект с помощью npm startи проверьте результат:
Реализовать нумерацию страниц
Установите следующую библиотеку, чтобы добавить нумерацию страниц в этой таблице.
JavaScript
xxxxxxxxxx
1
npm install react-bootstrap-table2-paginator --save
Теперь добавьте следующий код в этот компонент.
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import BootstrapTable from 'react-bootstrap-table-next';
3
import axios from 'axios';
4
import paginationFactory from 'react-bootstrap-table2-paginator';
5
export class Bootstraptab extends Component {
6
state = {
7
employee: [],
8
columns: [{
9
dataField: 'Id',
10
text: 'Id'
11
},
12
{
13
dataField: 'Name',
14
text: 'Name',
15
16
}, {
17
dataField: 'Age',
18
text: 'Age',
19
sort: true
20
},
21
{
22
dataField: 'Address',
23
text: 'Address',
24
sort: true
25
},
26
{
27
dataField: 'City',
28
text: 'City',
29
sort: true
30
},
31
{
32
dataField: 'ContactNum',
33
text: 'ContactNum',
34
sort: true
35
},
36
{
37
dataField: 'Salary',
38
text: 'Salary',
39
sort: true
40
},
41
{
42
dataField: 'Department',
43
text: 'Department',
44
sort: true
45
}]
46
}
47
componentDidMount() {
48
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
49
console.log(response.data);
50
this.setState({
51
employee: response.data
52
});
53
});
54
}
55
render() {
56
return (
57
<div className="container">
58
<div class="row" className="hdr">
59
<div class="col-sm-12 btn btn-info">
60
React Bootstrap Table with Searching and Custom Pagination
61
</div>
62
</div>
63
<div style={{ marginTop: 20 }}>
64
<BootstrapTable
65
striped
66
hover
67
keyField='id'
68
data={ this.state.employee }
69
columns={ this.state.columns }
70
pagination={ paginationFactory() } />
71
</div>
72
</div>
73
)
74
}
75
}
76
77
export default Bootstraptab
Запустите проект с помощью npm start и проверьте результат:
По умолчанию на странице отображается 10 записей, поэтому давайте создадим функцию для добавления нестандартного размера страницы. Добавьте следующий код в этот компонент и проверьте.
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import BootstrapTable from 'react-bootstrap-table-next';
3
import axios from 'axios';
4
import paginationFactory from 'react-bootstrap-table2-paginator';
5
export class Bootstraptab extends Component {
6
state = {
7
employee: [],
8
columns: [{
9
dataField: 'Id',
10
text: 'Id'
11
},
12
{
13
dataField: 'Name',
14
text: 'Name',
15
16
}, {
17
dataField: 'Age',
18
text: 'Age',
19
sort: true
20
},
21
{
22
dataField: 'Address',
23
text: 'Address',
24
sort: true
25
},
26
{
27
dataField: 'City',
28
text: 'City',
29
sort: true
30
},
31
{
32
dataField: 'ContactNum',
33
text: 'ContactNum',
34
sort: true
35
},
36
{
37
dataField: 'Salary',
38
text: 'Salary',
39
sort: true
40
},
41
{
42
dataField: 'Department',
43
text: 'Department',
44
sort: true
45
}]
46
}
47
componentDidMount() {
48
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
49
console.log(response.data);
50
this.setState({
51
employee: response.data
52
});
53
});
54
}
55
render() {
56
const options = {
57
page: 2,
58
sizePerPageList: [ {
59
text: '5', value: 5
60
}, {
61
text: '10', value: 10
62
}, {
63
text: 'All', value: this.state.employee.length
64
} ],
65
sizePerPage: 5,
66
pageStartIndex: 0,
67
paginationSize: 3,
68
prePage: 'Prev',
69
nextPage: 'Next',
70
firstPage: 'First',
71
lastPage: 'Last',
72
73
};
74
return (
75
<div className="container">
76
<div class="row" className="hdr">
77
<div class="col-sm-12 btn btn-info">
78
React Bootstrap Table with Searching and Custom Pagination
79
</div>
80
</div>
81
<div style={{ marginTop: 20 }}>
82
<BootstrapTable
83
striped
84
hover
85
keyField='id'
86
data={ this.state.employee }
87
columns={ this.state.columns }
88
pagination={ paginationFactory(options) } />
89
</div>
90
</div>
91
)
92
}
93
}
94
95
export default Bootstraptab
Запустите проект с помощью «npm start» и проверьте результат. Теперь создайте новый компонент Bootstraptab1.js и добавьте следующий код в этот компонент:
JavaScript
xxxxxxxxxx
1
import React, { Component } from 'react'
2
import BootstrapTable from 'react-bootstrap-table-next';
3
import axios from 'axios';
4
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
5
import paginationFactory from 'react-bootstrap-table2-paginator';
6
export class Bootstraptab1 extends Component {
7
state = {
8
products: [],
9
columns: [{
10
dataField: 'Id',
11
text: 'Id'
12
},
13
{
14
dataField: 'Name',
15
text: 'Name',
16
filter: textFilter()
17
}, {
18
dataField: 'Age',
19
text: 'Age',
20
sort: true
21
},
22
{
23
dataField: 'Address',
24
text: 'Address',
25
sort: true
26
},
27
{
28
dataField: 'City',
29
text: 'City',
30
sort: true
31
},
32
{
33
dataField: 'ContactNum',
34
text: 'ContactNum',
35
sort: true
36
},
37
{
38
dataField: 'Salary',
39
text: 'Salary',
40
sort: true
41
},
42
{
43
dataField: 'Department',
44
text: 'Department',
45
sort: true
46
}]
47
}
48
componentDidMount() {
49
axios.get('http://localhost:51760/Api/Emp/employee').then(response => {
50
console.log(response.data);
51
this.setState({
52
products: response.data
53
});
54
});
55
}
56
render() {
57
const options = {
58
page: 2,
59
sizePerPageList: [ {
60
text: '5', value: 5
61
}, {
62
text: '10', value: 10
63
}, {
64
text: 'All', value: this.state.products.length
65
} ],
66
sizePerPage: 5,
67
pageStartIndex: 0,
68
paginationSize: 3,
69
prePage: 'Prev',
70
nextPage: 'Next',
71
firstPage: 'First',
72
lastPage: 'Last',
73
paginationPosition: 'top'
74
};
75
return (
76
<div className="container">
77
<div class="row" className="hdr">
78
<div class="col-sm-12 btn btn-info">
79
React Bootstrap Table with Searching and Custom Pagination
80
</div>
81
</div>
82
<div className="container" style={{ marginTop: 50 }}>
83
<BootstrapTable
84
striped
85
hover
86
keyField='id'
87
data={ this.state.products }
88
columns={ this.state.columns }
89
filter={ filterFactory() }
90
pagination={ paginationFactory(options) }/>
91
</div>
92
</div>
93
)
94
}
95
}
96
97
export default Bootstraptab1
Теперь откройте файл app.js и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import logo from './logo.svg';
3
import './App.css';
4
import Bootstraptab1 from './Bootstraptab1';
5
function App() {
6
return (
7
<div className="App">
8
<Bootstraptab1/>
9
</div>
10
);
11
}
12
13
export default App;
Запустите проект с помощью npm startи проверьте результат:
Резюме
В этой статье мы узнали, как мы добавляем React Bootstrap Table и отображаем данные в этой таблице с помощью Web API в приложениях ReactJS. Мы также узнали, как реализовать сортировку, поиск и разбиение на страницы в таблице.