😁😁 mdbgo.io, mdbootstrap.com full (ok)
https://mdbgo.io/marta-szymanska/mdb5-demo-pro-design-blocks/pro/data/datatables.html#section-introduction
Mdbbootstrap Pro 👇🏽
Chú ý: Dùng bản filters.min.js sau để fix một số lỗi
Chú ý: Từ 1 - 14 dùng cho table
1. Basic example - HTML markup
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="https://mdbgo.io/marta-szymanska/mdb5-demo-pro-design-blocks/css/mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div class="datatable">
<table class="table">
<thead>
<tr>
<th class="th-sm">Name</th>
<th class="th-sm">Position</th>
<th class="th-sm">Office</th>
<th class="th-sm">Age</th>
<th class="th-sm">Start date</th>
<th class="th-sm">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Gloria Little 2</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<!-- Custom scripts -->
</body>
</html>
2. Basic data structure
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable">
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const basicData = {
columns: ['Name', 'Position', 'Office', 'Age', 'Start date', 'Salary'],
rows: [
['Tiger Nixon', 'System Architect', ' Edinburgh', 61, '2011/04/25', '$320,800'],
['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
['Gloria Little 2', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
],
};
const datatable = document.getElementById('datatable');
new mdb.Datatable(document.getElementById('datatable'), basicData)
})();
3. Advanced data structure
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable">
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const advancedData = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
new mdb.Datatable(document.getElementById('datatable'), advancedData)
})();
4. Search
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div class="form-outline mb-4">
<input type="text" class="form-control" id="datatable-search-input">
<label class="form-label" for="datatable-search-input">Search</label>
</div>
<div id="datatable">
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const data = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
const instance = new mdb.Datatable(document.getElementById('datatable'), data)
document.getElementById('datatable-search-input').addEventListener('input', (e) => {
instance.search(e.target.value);
});
})();
5. Advanced search
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div class="input-group mb-4">
<input type="text" class="form-control" id="advanced-search-input" placeholder="phrase in:column1,column2">
<button class="btn btn-primary" id="advanced-search-button" type="button">
<i class="fa fa-search"></i>
</button>
</div>
<div id="datatable">
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const data = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
const instance = new mdb.Datatable(document.getElementById('datatable'), data)
const advancedSearchInput = document.getElementById('advanced-search-input');
const search = (value) => {
let [phrase, columns] = value.split(' in:').map((str) => str.trim());
if (columns) {
columns = columns.split(',').map((str) => str.toLowerCase().trim());
}
instance.search(phrase, columns);
}
document.getElementById('advanced-search-button').addEventListener('click', (e) => search(advancedSearchInput.value));
advancedSearchInput.addEventListener('keydown', e => {
if (e.keyCode === 13) search(e.target.value);
})
})();
6. Sort
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div class="input-group mb-4">
<input type="text" class="form-control" id="advanced-search-input" placeholder="phrase in:column1,column2">
<button class="btn btn-primary" id="advanced-search-button" type="button">
<i class="fa fa-search"></i>
</button>
</div>
<div id="datatable">
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const data = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
const datatableInstance = new mdb.Datatable(
document.getElementById('datatable'),
data,
{
sortField: 'name',
sortOrder: 'desc'
}
);
datatableInstance.sort(data.columns[0], 'asc');
})();
7. Selectable rows
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable" data-mdb-selectable="true" data-mdb-multi="true"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const basicData = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
const datatable = document.getElementById('datatable');
new mdb.Datatable(datatable, basicData);
datatable.addEventListener('selectRows.mdb.datatable', e => {
console.log(e.selectedRows, e.selectedIndexes, e.allSelected);
})
})();
8. Scroll
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable" data-mdb-max-height="520" data-mdb-max-width="520"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const basicData = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
const datatable = document.getElementById('datatable');
new mdb.Datatable(datatable, basicData);
})();
9. Fixed header
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable" data-mdb-max-height="460" data-mdb-fixed-header="true"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const basicData = {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position', sort: false },
{ label: 'Office', field: 'office', sort: false },
{ label: 'Age', field: 'age', sort: false },
{ label: 'Start date', field: 'date' },
{ label: 'Salary', field: 'salary', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: 61,
date: '2011/04/25',
salary: '$320,800',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: 23,
date: '2008/12/13',
salary: '$103,600',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: 30,
date: '2008/12/19',
salary: '$90,560',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: 22,
date: '2013/03/03',
salary: '$342,000',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: 36,
date: '2008/10/16',
salary: '$470,600',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: 43,
date: '2012/12/18',
salary: '$313,500',
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
age: 19,
date: '2010/03/17',
salary: '$385,750',
},
{
name: 'Michael Silva',
position: 'Marketing Designer',
office: 'London',
age: 66,
date: '2012/11/27',
salary: '$198,500',
},
{
name: 'Paul Byrd',
position: 'Chief Financial Officer (CFO)',
office: 'New York',
age: 64,
date: '2010/06/09',
salary: '$725,000',
},
{
name: 'Gloria Little',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
},
{
name: 'Gloria Little 2',
position: 'Systems Administrator',
office: 'New York',
age: 59,
date: '2009/04/10',
salary: '$237,500',
}
],
};
const datatable = document.getElementById('datatable');
new mdb.Datatable(datatable, basicData);
})();
10. Fixed columns
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const basicData = {
columns: [
{ label: 'Name', field: 'name', sort: true, width: 200, fixed: true },
{ label: 'Position', field: 'position', sort: false, width: 250 },
{ label: 'Office', field: 'office', sort: false, width: 250, fixed: true },
{ label: 'Age', field: 'age', sort: false, width: 250 },
{ label: 'Start date', field: 'date', sort: true, width: 250 },
{ label: 'Salary', field: 'salary', sort: false, width: 250, fixed: 'right' },
],
rows: [
['Tiger Nixon', 'System Architect', ' Edinburgh', 61, '2011/04/25', '$320,800'],
['Sonya Frost', 'Software Engineer', 'Edinburgh', 23, '2008/12/13', '$103,600'],
['Jena Gaines', 'Office Manager', 'London', 30, '2008/12/19', '$90,560'],
['Quinn Flynn', 'Support Lead', 'Edinburgh', 22, '2013/03/03', '$342,000'],
['Charde Marshall', 'Regional Director', 'San Francisco', 36, '2008/10/16', '$470,600'],
['Haley Kennedy', 'Senior Marketing Designer', 'London', 43, '2012/12/18', '$313,500'],
['Tatyana Fitzpatrick', 'Regional Director', 'London', 19, '2010/03/17', '$385,750'],
['Michael Silva', 'Marketing Designer', 'London', 66, '2012/11/27', '$198,500'],
['Paul Byrd', 'Chief Financial Officer (CFO)', 'New York', 64, '2010/06/09', '$725,000'],
['Gloria Little', 'Systems Administrator', 'New York', 59, '2009/04/10', '$237,500'],
],
};
const datatable = document.getElementById('datatable');
new mdb.Datatable(datatable, basicData);
})();
11. Async data
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable" data-mdb-loading="true"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const columns = [
{ label: 'Address', field: 'address' },
{ label: 'Company', field: 'company' },
{ label: 'Email', field: 'email' },
{ label: 'Name', field: 'name' },
{ label: 'Phone', field: 'phone' },
{ label: 'Username', field: 'username' },
{ label: 'Website', field: 'website' },
];
const asyncTable = new mdb.Datatable(
document.getElementById('datatable'),
{
columns,
}
);
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{
rows: data.map((user) => ({
...user,
address: `${user.address.city}, ${user.address.street}`,
company: user.company.name,
})),
},
{ loading: false }
);
});
})();
12. Action buttons
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable-custom"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const customDatatable = document.getElementById('datatable-custom');
const setActions = () => {
document.getElementsByClassName('call-btn').forEach(btn => {
btn.addEventListener('click', () => {
console.log(`call ${btn.attributes['data-mdb-number'].value}`)
})
})
document.getElementsByClassName('message-btn').forEach(btn => {
btn.addEventListener('click', () => {
console.log(`send a message to ${btn.attributes['data-mdb-email'].value}`)
})
})
}
customDatatable.addEventListener('render.mdb.datatable', setActions);
new mdb.Datatable(customDatatable, {
columns: [
{ label: 'Name', field: 'name' },
{ label: 'Position', field: 'position' },
{ label: 'Office', field: 'office' },
{ label: 'Contact', field: 'contact', sort: false },
],
rows: [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
phone: '+48000000000',
email: 'tiger.nixon@gmail.com'
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
phone: '+53456123456',
email: 'sfrost@gmail.com'
},
{
name: 'Tatyana Fitzpatrick',
position: 'Regional Director',
office: 'London',
phone: '+42123432456',
email: 'tfitz@gmail.com'
},
].map((row) => {
return {
...row,
contact: `<button class="call-btn btn btn-outline-primary btn-floating btn-sm" data-mdb-number="${row.phone}"><i class="fa fa-phone"></i></button>
<button class="message-btn btn ms-2 btn-primary btn-floating btn-sm" data-mdb-email="${row.email}"><i class="fa fa-envelope"></i></button>`,
};
}),
}, { hover: true });
}) ();
13. Cell formatting
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable-cell-format" data-mdb-sort-field="purchases" data-mdb-sort-order="desc"></div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const rows = [
['Product 1', 10, 103],
['Product 2', 45, 110],
['Product 3', 76, 56],
['Product 4', 89, 230],
['Product 5', 104, 240],
['Product 6', 97, 187],
['Product 7', 167, 130],
['Product 8', 50, 199],
['Product 9', 4, 206],
['Product 10', 120, 88],
['Product 11', 22, 100],
];
const maxValue = Math.max(...rows.map((row) => row[2]));
const minValue = Math.min(...rows.map((row) => row[2]));
const colors = ['#E3F2FD', '#BBDEFB', '#90CAF9', '#64B5F6', '#42A5F5'];
const step = (maxValue - minValue) / (colors.length - 1);
const formatCell = (cell, value) => {
const colorIndex = Math.floor((value - minValue) / step);
cell.style.backgroundColor = colors[colorIndex];
cell.style.fontWeight = 400;
};
const columns = [
{ label: 'Product', field: 'product' },
{ label: 'Quantity', field: 'quantity' },
{ label: 'Purchases', field: 'purchases', format: formatCell },
];
const datatableInstance = new mdb.Datatable(
document.getElementById('datatable-cell-format'),
{ rows, columns }
);
})();
14. Clickable rows
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<div id="datatable-clickable-rows" data-mdb-clickable-rows="true" data-mdb-selectable="true" data-mdb-multi="true"></div>
<!-- Modal -->
<div class="modal fade" tabindex="-1" aria-hidden="true" id="modal-clickable-rows">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-header-clickable-rows"></h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body mt-4 mb-5" id="modal-body-clickable-rows"></div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary">
Reply<i class="fa fa-paper-plane ms-2"></i>
</button>
<button type="button" class="btn btn-outline-primary">
Forward<i class="fa fa-arrow-right ms-2"></i>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
const table = document.getElementById('datatable-clickable-rows');
const modal = document.getElementById('modal-clickable-rows');
const modalBody = document.getElementById('modal-body-clickable-rows');
const modalHeader = document.getElementById('modal-header-clickable-rows');
const modalInstance = new mdb.Modal(modal);
const setupButtons = (action) => {
document.getElementsByClassName(`${action}-email-button`).forEach((button) => {
button.addEventListener('click', (e) => {
e.stopPropagation();
const index = button.getAttribute('data-mdb-index');
console.log(`${action} message: ${index}`, messages[index]);
});
});
};
const columns = [
{ label: 'Actions', field: 'actions', sort: false },
{ label: 'From', field: 'from' },
{ label: 'Title', field: 'title' },
{ label: 'Message', field: 'preview', sort: false },
{ label: 'Date', field: 'date' },
];
const messages = [
{
from: 'admin@mdbootstrap.com',
title: 'MDBootstrap spring sale',
message:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',
date: '11/12/2019',
},
{
from: 'user@mdbootstrap.com',
title: 'How to purchase MDB5 package?',
message:
'Quisque tempor ligula eu lobortis scelerisque. Mauris tristique mi a erat egestas, quis dictum nibh iaculis. Sed gravida sodales egestas. In tempus mollis libero sit amet lacinia. Duis non augue sed leo imperdiet efficitur faucibus vitae elit. Mauris eu cursus ligula. Praesent posuere efficitur cursus.',
date: '10/12/2019',
},
{
from: 'user@mdbootstrap.com',
title: 'Licence renewal',
message:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',
date: '09/12/2019',
},
{
from: 'admin@mdbootstrap.com',
title: 'Black friday offer',
message:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.',
date: '08/12/2019',
},
];
const rows = messages.map((email, i) => {
const getPreview = (message, length) => {
if (message.length <= length) return message;
return `${message.slice(0, length)}...`;
};
return {
...email,
preview: getPreview(email.message, 20),
actions: `
<a role="button" class="star-email-button text-warning" data-mdb-index="${i}"><i class="far fa-star"></i></a>
<a role="button" class="delete-email-button text-muted ms-2" data-mdb-index="${i}"><i class="fa fa-trash-alt"></i></a>
`,
};
});
table.addEventListener('rowClick.mdb.datatable', (e) => {
const { index } = e;
const { message, title, from } = messages[index];
modalHeader.innerText = title;
modalBody.innerHTML = `
<h6 class="mb-4">From: <strong>${from}</strong></h6>
<p>${message}</p>
`;
modalInstance.show();
});
table.addEventListener('render.mdb.datatable', () => {
setupButtons('star');
setupButtons('delete');
})
const datatableInstance = new mdb.Datatable(table, {
columns,
rows,
});
})();
Các phần tiếp theo
1. Sidenav
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="border p-4 mb-4">
<section style="border-radius: .5rem .5rem 0 0; position: relative; overflow: hidden; min-height: 400px;" class="p-4 d-flex justify-content-center">
<!-- Sidenav-->
<nav id="sidenav-1" data-mdb-close-on-esc="false" class="sidenav sidenav-primary ps" data-mdb-hidden="false" data-mdb-position="absolute" data-mdb-focus-trap="false" style="width: 240px; height: 100%; position: absolute; transition: all 0.3s linear 0s; transform: translateX(0%);">
<ul class="sidenav-menu">
<li class="sidenav-item">
<a class="sidenav-link active ripple-surface-primary"> <i class="far fa-smile fa-fw me-3"></i><span>Link 1</span></a>
</li>
<li class="sidenav-item">
<a class="sidenav-link ripple-surface-primary collapsed" data-mdb-toggle="collapse" href="#sidenav-collapse-2-0-0" role="button" aria-expanded="false"><i class="fas fa-grin fa-fw me-3"></i><span>Category 1</span><i class="fas fa-angle-down rotate-icon" style="transform: rotate(0deg);"></i></a>
<ul class="sidenav-collapse collapse" id="sidenav-collapse-2-0-0" style="">
<li class="sidenav-item">
<a class="sidenav-link ripple-surface">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link ripple-surface">Link 3</a>
</li>
</ul>
</li>
<li class="sidenav-item">
<a class="sidenav-link ripple-surface-primary collapsed" data-mdb-toggle="collapse" href="#sidenav-collapse-2-0-1" role="button" aria-expanded="false"><i class="fas fa-grin-wink fa-fw me-3"></i><span>Category 2</span><i class="fas fa-angle-down rotate-icon" style="transform: rotate(0deg);"></i></a>
<ul class="sidenav-collapse collapse" id="sidenav-collapse-2-0-1" style="">
<li class="sidenav-item">
<a class="sidenav-link ripple-surface">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link ripple-surface">Link 5</a>
</li>
</ul>
</li>
</ul>
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
</div>
<div class="ps__rail-y" style="top: 0px; right: 0px;">
<div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</nav>
<!-- Sidenav-->
<div style="padding: 20px;" class="text-center">
<button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" class="btn btn-primary" aria-controls="#sidenav-1" aria-haspopup="true" aria-expanded="true" style="">
<i class="fas fa-bars"></i>
</button>
<div class="d-flex justify-content-center my-5"></div>
</div>
</section>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
2. Multiselect
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 pb-4 d-flex justify-content-center">
<div style="width: 22rem;">
<select class="select" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
</select>
<label class="form-label select-label">Example label</label>
</div>
</section>
<div class="p-4 text-center border-top mobile-hidden">
<a class="btn btn-link px-3" data-mdb-toggle="collapse" href="#example2" role="button" aria-expanded="false" aria-controls="example2" data-ripple-color="hsl(0, 0%, 67%)">
<i class="fas fa-code me-md-2"></i>
<span class="d-none d-md-inline-block">
Show code
</span>
</a>
<a class="btn btn-link px-3 " data-ripple-color="hsl(0, 0%, 67%)">
<i class="fas fa-file-code me-md-2 pe-none"></i>
<span class="d-none d-md-inline-block export-to-snippet pe-none">
Edit in sandbox
</span>
</a>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
3. Select with label, placeholder, clear, custom content, number of options that will be displayed
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<h2 class="mb-4">Select with label</h2>
<section class="w-100 p-4 pb-4 d-flex justify-content-center">
<div style="width: 22rem;">
<select class="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<label class="form-label select-label">Example label</label>
</div>
</section>
<h2 class="mb-4">Select with placeholder</h2>
<section class="w-100 p-4 pb-4 d-flex justify-content-center">
<div style="width: 22rem;">
<select class="select" data-mdb-placeholder="Example placeholder" multiple data-mdb-clear-button="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
</section>
<h2 class="mb-4">Custom content</h2>
<section class="w-100 p-4 pb-4 d-flex justify-content-center">
<div style="width: 22rem;">
<select class="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div class="select-custom-content">
<button class="btn-save btn btn-primary btn-sm">Save</button>
</div>
</div>
</section>
<h2 class="mb-4">Number of options that will be displayed </h2>
<select class="select" data-mdb-visible-options="3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>4. Secondary text, Search, Select with search inside a modal, Option groups
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<h2 class="mb-4">Secondary text</h2>
<select class="select" data-mdb-option-height="44">
<option value="1" data-mdb-secondary-text="Secondary text">One</option>
<option value="2" data-mdb-secondary-text="Secondary text">Two</option>
<option value="3" data-mdb-secondary-text="Secondary text">Three</option>
<option value="4" data-mdb-secondary-text="Secondary text">Four</option>
<option value="5" data-mdb-secondary-text="Secondary text">Five</option>
</select>
<h2 class="mb-4">Search</h2>
<select class="select" data-mdb-filter="true">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
<h2 class="mb-4">Option groups</h2>
<select class="select">
<optgroup label="Label 1">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</optgroup>
<optgroup label="Label 2">
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</optgroup>
</select>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
5. Select with icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<h2 class="mb-4">Select with icons</h2>
<select class="select" id="basic-select">
<option value="1" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">
One
</option>
<option value="2" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">
Two
</option>
<option value="3" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">
Three
</option>
<option value="4" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">
Four
</option>
<option value="5" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">
Five
</option>
</select>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
6. lightbox with the most common use case with the bootstrap grid.
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<h2>A basic example of a lightbox with the most common use case with the bootstrap grid.</h2>
<section class="p-4 d-flex justify-content-center text-center w-100">
<div class="lightbox">
<div class="row">
<div class="col-lg-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp" data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp" alt="Table Full of Spices" class="w-100" />
</div>
<div class="col-lg-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp" data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp" alt="Winter Landscape" class="w-100" />
</div>
<div class="col-lg-4">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp" data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp" alt="View of the City in the Mountains" class="w-100" />
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
7. datepicker, Timepicker
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<h2>The datepicker</h2>
<section class="w-100 p-4 d-flex justify-content-center pb-4">
<div class="form-outline datepicker" style="width: 22rem;">
<input type="text" class="form-control" id="exampleDatepicker1" />
<label for="exampleDatepicker1" class="form-label">Select a date</label>
</div>
</section>
<h2 class="mb-4">Inline Timepicker with 12h</h2>
<section class="w-100 p-4 d-flex justify-content-center pb-4">
<div style="width: 22rem;" class="form-outline timepicker-inline-12">
<input type="text" class="form-control" id="form4" />
<label class="form-label" for="form4">Select a time</label>
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
Phần này chỉ gắn link ở tiêu đề
9. Lazy loading
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<div class="container my-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<h2>A basic example of a lightbox with the most common use case with the bootstrap grid.</h2>
<section id="section-basic-example">
<!-- Section title -->
<h2 class="mb-4">Lazy loading</h2>
<p>
Lazy Loading will automatically initialize after adding <code>.lazy</code> class to your
<code>img</code> or <code>video</code> element. It is important to add
<code>data-mdb-lazy-src</code> attribute - otherwise, Lazy Load will throw an error.
</p>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 d-flex justify-content-center pb-4">
<div class="container lazy" style="height: 500px; overflow-y: scroll">
<div class="row text-center" style="height: 800px">
<p>Scroll down to see an image</p>
<p><i class="far fa-arrow-alt-circle-down fa-3x my-4"></i></p>
<img data-mdb-lazy-src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(102).webp" data-mdb-lazy-placeholder="https://place-hold.it/1321x583?text=Loading" alt="Small Apartment" class="img-fluid lazy my-3" style="margin-top: 50% !important" />
<video class="lazy img-fluid" data-mdb-lazy-src="https://mdbcdn.b-cdn.net/img/video/Sail-Away.mp4" data-mdb-lazy-delay="1000" data-mdb-lazy-placeholder="https://place-hold.it/838x471?text=Loading" muted="muted" autoplay="autoplay"></video>
</div>
</div>
</section>
<div class="p-4 text-center border-top mobile-hidden">
<a class="btn btn-link px-3" data-mdb-toggle="collapse" href="#example1" role="button" aria-expanded="false" aria-controls="example1" data-ripple-color="hsl(0, 0%, 67%)">
<i class="fas fa-code me-md-2"></i>
<span class="d-none d-md-inline-block">
Show code
</span>
</a>
<a class="btn btn-link px-3 " data-ripple-color="hsl(0, 0%, 67%)">
<i class="fas fa-file-code me-md-2 pe-none"></i>
<span class="d-none d-md-inline-block export-to-snippet pe-none">
Edit in sandbox
</span>
</a>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
11. Validation
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<!--Section: Basic example-->
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom01" value="Mark" required />
<label for="validationCustom01" class="form-label">First name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom02" value="Otto" required />
<label for="validationCustom02" class="form-label">Last name</label>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="col-md-4">
<div class="input-group form-outline">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required />
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="invalid-feedback">Please choose a username.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom03" required />
<label for="validationCustom03" class="form-label">City</label>
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-outline">
<input type="text" class="form-control" id="validationCustom05" required />
<label for="validationCustom05" class="form-label">Zip</label>
<div class="invalid-feedback">Please provide a valid zip.</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required />
<label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(() => {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach((form) => {
form.addEventListener('submit', (event) => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
12. Filters radio, Filters checkbox
12. 1 Radio
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center" id="basic-example-filters" data-mdb-items=".basic-example-item" data-mdb-auto-filter="true">
<div class="col-md-6" data-mdb-filter="color">
<span class="fa-lg">Filter: Color</span>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="black" />
<label class="form-check-label" for="inlineRadio1">Black</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="red" />
<label class="form-check-label" for="inlineRadio2">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="blue" />
<label class="form-check-label" for="inlineRadio3">Blue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="gray" />
<label class="form-check-label" for="inlineRadio4">Gray</label>
</div>
</div>
<div class="col-md-6" data-mdb-filter="sale">
<span class="fa-lg mb-5">Filter: Sale</span>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="yes" />
<label class="form-check-label" for="inlineRadio5">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="no" />
<label class="form-check-label" for="inlineRadio6">No</label>
</div>
<button type="button" class="btn btn-primary mt-3" id="resetButton">
Clear all filters
</button>
</div>
</div>
<div class="row text-center" id="basic-example-data">
<div class="col-md-4 mt-3 basic-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket 1</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 basic-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 basic-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp" class="card-img-top" alt="Blue Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 basic-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp" class="card-img-top" alt="Red Hoodie" />
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 basic-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket 2</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 basic-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(function () {
const basicExampleFilters = document.getElementById('basic-example-filters');
const resetButton = document.getElementById('resetButton');
const filtersInstance = new Filters(basicExampleFilters);
resetButton.addEventListener('click', () => {
filtersInstance.clear();
});
})();
12.2 Checkbox
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center" id="checkbox-example-filters" data-mdb-items=".checkbox-example-item" data-mdb-auto-filter="true">
<div class="col-md-6" data-mdb-filter="color">
<span class="fa-lg mb-5">Filter: Color</span>
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="red" />
<label class="form-check-label" for="inlineCheckbox1">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="blue" />
<label class="form-check-label" for="inlineCheckbox2">Blue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="black" />
<label class="form-check-label" for="inlineCheckbox3">Black</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox4" value="gray" />
<label class="form-check-label" for="inlineCheckbox4">Gray</label>
</div>
</div>
<div class="col-md-6" data-mdb-filter="sale">
<span class="fa-lg mb-5">Filter: Sale</span>
<div class="form-check mt-3">
<input class="form-check-input" type="checkbox" id="inlineCheckbox5" value="yes" />
<label class="form-check-label" for="inlineCheckbox5">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineCheckbox6" value="no" />
<label class="form-check-label" for="inlineCheckbox6">No</label>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp" class="card-img-top" alt="Blue Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp" class="card-img-top" alt="Red Hoodie" />
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 checkbox-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</section>
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(function () {
const checkboxExampleFilters = document.getElementById('checkbox-example-filters');
const checkboxExampleInstance = new Filters(checkboxExampleFilters);
})();
12.3 Data structure - array
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center" id="array-example-filters" data-mdb-auto-filter="true">
<div class="col-md-6" data-mdb-filter="color">
<span class="fa-lg">Filter: Color</span>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="arrayRadioOptions" id="arrayRadio1" value="black" />
<label class="form-check-label" for="arrayRadio1">Black</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="arrayRadioOptions" id="arrayRadio2" value="red" />
<label class="form-check-label" for="arrayRadio2">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="arrayRadioOptions" id="arrayRadio3" value="blue" />
<label class="form-check-label" for="arrayRadio3">Blue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="arrayRadioOptions" id="arrayRadio4" value="gray" />
<label class="form-check-label" for="arrayRadio4">Gray</label>
</div>
</div>
<div class="col-md-6" data-mdb-filter="sale">
<span class="fa-lg mb-5">Filter: Sale</span>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="arrayRadioOptions2" id="arrayRadio5" value="yes" />
<label class="form-check-label" for="arrayRadio5">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="arrayRadioOptions2" id="arrayRadio6" value="no" />
<label class="form-check-label" for="arrayRadio6">No</label>
</div>
<button type="button" class="btn btn-primary mt-3" id="arrayReset">
Clear all filters
</button>
</div>
</div>
<div class="row text-center" id="array-example-data"></div>
</section>
</div>
</section>
<!--Section: Demo-->
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(function () {
const arrayExampleFilters = document.getElementById('array-example-filters');
const arrayExampleData = document.getElementById('array-example-data');
const arrayReset = document.getElementById('arrayReset');
const dataset = [
{
id: 1,
color: 'black',
price: 100,
sale: 'no',
product: 'Black Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
},
{
id: 2,
color: 'black',
price: 100,
sale: 'no',
product: 'Black Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
},
{
id: 3,
color: 'gray',
price: 80,
sale: 'yes',
product: 'Gray Jumper',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
},
{
id: 4,
color: 'gray',
price: 80,
sale: 'yes',
product: 'Gray Jumper',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
},
{
id: 5,
color: 'red',
price: 120,
sale: 'yes',
product: 'Red Hoodie',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
},
{
id: 6,
color: 'blue',
price: 90,
sale: 'no',
product: 'Blue Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
},
];
const arrayInstance = new Filters(arrayExampleFilters, {
items: dataset,
});
const renderItems = (items) => {
const elements = items.map((item) => {
const template = `
<div class="col-md-4 mt-3">
<div class="card shadow-2">
<img src="${item.img}"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">
${item.price}$
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return template;
});
arrayExampleData.innerHTML = elements.join('\n');
};
renderItems(dataset);
arrayExampleFilters.addEventListener('update.mdb.filters', (e) => {
renderItems(e.items);
});
arrayReset.addEventListener('click', () => {
arrayInstance.clear();
});
})();
12.4 Filter Spinner
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section id="subsection-spinner-example">
<!-- Subsection title -->
<h4 class="mb-4">Spinner & Asynchronous Data example</h4>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center mb-5" id="spinner-example-filters">
<p class="text-center fa-lg fw-bold">Price:</p>
<div class="col-md-3 mt-3 text-center">
<div class="form-outline">
<input type="number" id="typeNumber" class="form-control" value="0" />
<label class="form-label" for="typeNumber">Minimum</label>
</div>
</div>
<div class="col-md-3 mt-3 text-center">
<div class="form-outline">
<input type="number" id="typeNumber2" class="form-control" value="200" />
<label class="form-label" for="typeNumber2">Maximum</label>
</div>
</div>
</div>
<div class="row text-center mt-3" id="spinner-example-data" style="max-height: 800px; overflow-y: scroll"></div>
<div class="row">
<div class="col-md-12 mt-3">
<div class="spinner-grow text-primary mx-auto my-5" id="spinner" role="status" style="display: none">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</section>
<!--Section: Demo-->
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(function () {
const spinnerExampleFilters = document.getElementById('spinner-example-filters');
const spinner = document.getElementById('spinner');
const spinnerData = document.getElementById('spinner-example-data');
const spinnerInput = document.getElementById('typeNumber');
const secondSpinnerInput = document.getElementById('typeNumber2');
const dataset = [
{
name: 'Fantasy T-shirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
price: 12.99,
},
{
name: 'Fantasy T-shirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
price: 12.99,
},
{
name: 'Fantasy T-shirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
price: 40.99,
},
{
name: 'Denim Jacket',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
price: 40.99,
},
{
name: 'Ripped jeans',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/11.webp',
price: 20.99,
},
{
name: 'Boyfriend jeans',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/10.webp',
price: 20.99,
},
{
name: 'Ripped sweatshirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.webp',
price: 29.99,
},
{
name: 'Longsleeve',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.webp',
price: 120.99,
},
{
name: 'Stripped sweatshirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/6.webp',
price: 32.99,
},
{
name: 'Red chinos',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.webp',
price: 62.99,
},
{
name: 'Camel coat',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.webp',
price: 62.99,
},
{
name: 'Blue jeans',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.webp',
price: 42.99,
},
{
name: 'Orange T-shirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.webp',
price: 12.99,
},
{
name: 'Ballerina skirt',
image: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.webp',
price: 12.99,
},
];
const spinnerInstance = new Filters(spinnerExampleFilters, {
items: dataset,
});
const renderItems = (items) => {
spinner.style.display = 'none';
const elements = items.map((item) => {
const template = `
<div class="col-md-4 mt-3">
<div class="card shadow-2">
<img src="${item.image}"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.name}</h5>
<p class="card-text">
${item.price}$
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return template;
});
spinnerData.innerHTML = elements.join('\n');
};
renderItems(dataset);
const filterItems = () => {
spinnerData.style.display = 'none';
spinner.style.display = 'block';
setTimeout(() => {
spinnerInstance.filter({
price: (price) => {
const minVal = spinnerInput.value;
const maxVal = secondSpinnerInput.value;
spinner.style.display = 'none';
spinnerData.style.display = 'flex';
return price >= minVal && price <= maxVal;
},
});
}, 2000);
};
spinnerInput.addEventListener('change', filterItems);
secondSpinnerInput.addEventListener('change', filterItems);
spinnerExampleFilters.addEventListener('update.mdb.filters', (e) => {
renderItems(e.items);
});
})();
12.5 Filter and sort
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-start" id="filter-sort-example-filters" data-mdb-auto-filter="true">
<div class="col-md-6" data-mdb-filter="color">
<span class="fa-lg">Filter: Color</span>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="filterSortRadioOptions" id="filterSortRadio1" value="black" />
<label class="form-check-label" for="filterSortRadio1">Black</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="filterSortRadioOptions" id="filterSortRadio2" value="red" />
<label class="form-check-label" for="filterSortRadio2">Red</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="filterSortRadioOptions" id="filterSortRadio3" value="blue" />
<label class="form-check-label" for="filterSortRadio3">Blue</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="filterSortRadioOptions" id="filterSortRadio4" value="gray" />
<label class="form-check-label" for="filterSortRadio4">Gray</label>
</div>
</div>
<div class="col-md-6" data-mdb-filter="sale">
<span class="fa-lg mb-5">Filter: Sale</span>
<div class="form-check mt-3">
<input class="form-check-input" type="radio" name="filterSortRadioOptions2" id="filterSortRadio5" value="yes" />
<label class="form-check-label" for="filterSortRadio5">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="filterSortRadioOptions2" id="filterSortRadio6" value="no" />
<label class="form-check-label" for="filterSortRadio6">No</label>
</div>
<button type="button" class="btn btn-primary mt-3" id="filterSortReset">
Clear all filters
</button>
</div>
<div class="col-md-8 my-5">
<select class="select" id="filter-sort-select">
<option value="" disabled selected>Choose category</option>
<option value="1">Product name ascending</option>
<option value="2">Product name descending</option>
<option value="3">Highest price</option>
<option value="4">Lowest price</option>
</select>
<label class="form-label select-label">Sort</label>
</div>
</div>
<div class="row text-center" id="filter-sort-example-data"></div>
</section>
</div>
</section>
</div>
</section>
<!--Section: Demo-->
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(function () {
const multiExampleFilters = document.getElementById('filter-sort-example-filters');
const multiExampleData = document.getElementById('filter-sort-example-data');
const multiReset = document.getElementById('filterSortReset');
const multiSelect = document.getElementById('filter-sort-select');
const dataset = [
{
id: 1,
color: 'black',
price: 88,
sale: 'no',
product: 'Black Jeans Jacket 1',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
},
{
id: 2,
color: 'black',
price: 100,
sale: 'no',
product: 'Black Jeans Jacket 2',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
},
{
id: 3,
color: 'gray',
price: 80,
sale: 'yes',
product: 'Gray Jumper 1',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
},
{
id: 4,
color: 'gray',
price: 68,
sale: 'yes',
product: 'Gray Jumper 2',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
},
{
id: 5,
color: 'red',
price: 120,
sale: 'yes',
product: 'Red Hoodie',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
},
{
id: 6,
color: 'blue',
price: 90,
sale: 'no',
product: 'Blue Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
},
];
const multiInstance = new Filters(multiExampleFilters, {
items: dataset,
});
const renderItems = (items) => {
const elements = items.map((item) => {
const template = `
<div class="col-md-4 mt-3">
<div class="card shadow-2">
<img src="${item.img}"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">
${item.price}$
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return template;
});
multiExampleData.innerHTML = elements.join('\n');
};
renderItems(dataset);
multiExampleFilters.addEventListener('update.mdb.filters', (e) => {
renderItems(e.items);
});
multiReset.addEventListener('click', () => {
multiInstance.clear();
});
multiSelect.addEventListener('optionSelect.mdb.select', (e) => {
const value = e.target.value;
if (value === '1') {
multiInstance.sort('product');
}
if (value === '2') {
multiInstance.sort('product', 'desc');
}
if (value === '3') {
multiInstance.sort('price', 'desc');
}
if (value === '4') {
multiInstance.sort('price');
}
});
})();
12.6 Customization - custom filter
C:\xampp8\htdocs\lva\script.js
// Customization - custom filter
(function () {
const rangeExampleFilters = document.getElementById('range-example-filters');
const minRange = document.getElementById('customRange');
const maxRange = document.getElementById('customRange2');
const rangeInstance = new Filters(rangeExampleFilters);
minRange.addEventListener('change', () => {
const min = minRange.value;
const max = maxRange.value;
document.getElementById('min-val').textContent = `Current: ${min}$`;
rangeInstance.filter({
price: (price) => {
return price >= min && price <= max;
},
});
});
maxRange.addEventListener('change', () => {
const min = minRange.value;
const max = maxRange.value;
document.getElementById('max-val').textContent = `Current: ${max}$`;
rangeInstance.filter({
price: (price) => {
return price >= min && price <= max;
},
});
});
})();
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<!--Section: Demo-->
<section id="section-range-example">
<!-- Subsection title -->
<h4 class="mb-4">Customization - custom filter</h4>
<p>
Pass an arrow function as the value of the filter key at the filter object to define your
custom filter.
</p>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center" id="range-example-filters" data-mdb-items=".range-example-item" data-mdb-auto-filter="false">
<div class="col-md-12 mt-3 text-center">
<p class="fa-lg">Price:</p>
<label for="customRange" class="form-label">Min</label>
<input type="range" class="form-range" value="80" min="80" max="120" id="customRange" autocompleted="" />
<p id="min-val">Current: 80$</p>
<label for="customRange2" class="form-label">Max</label>
<input type="range" class="form-range" value="120" min="80" max="120" id="customRange2" autocompleted="" />
<p id="max-val">Current: 120$</p>
</div>
</div>
<div class="row text-center" id="range-example-data">
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp" class="card-img-top" alt="Blue Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp" class="card-img-top" alt="Red Hoodie" />
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<!--Section: Demo-->
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
12.7 Custom sort
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Google Fonts Roboto -->
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css">
</head>
<body>
<section id="subsection-custom-sort">
<!-- Section title -->
<h2 class="mb-4">Custom sort</h2>
<p>
Pass an arrow function (with two parameters - previous and second comparing items) as the
third parameter at the sort function to define your custom sort rule.
</p>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center" id="custom-sort">
<div class="col-md-4 text-center">
<button type="button" class="btn btn-primary" id="customSortBtn">
Sort by product name ascending
</button>
</div>
<div class="col-md-4 text-center">
<button type="button" class="btn btn-primary" id="customSortBtn2">
Sort by product name descending
</button>
</div>
</div>
<div class="row text-center" id="custom-sort-data"></div>
</section>
<div class="p-4 text-center border-top mobile-hidden">
<a class="btn btn-link px-3" data-mdb-toggle="collapse" href="#example11" role="button" aria-expanded="false" aria-controls="example11" data-ripple-color="hsl(0, 0%, 67%)">
<i class="fas fa-code me-md-2"></i>
<span class="d-none d-md-inline-block">
Show code
</span>
</a>
<a class="btn btn-link px-3 " data-ripple-color="hsl(0, 0%, 67%)">
<i class="fas fa-file-code me-md-2 pe-none"></i>
<span class="d-none d-md-inline-block export-to-snippet pe-none">
Edit in sandbox
</span>
</a>
</div>
</div>
</section>
<!-- Subsection title -->
<h4 class="mb-4">Customization - custom filter</h4>
<p>
Pass an arrow function as the value of the filter key at the filter object to define your
custom filter.
</p>
<!--Section: Demo-->
<section class="pb-4">
<div class="bg-white border rounded-5">
<section class="w-100 p-4 justify-content-center">
<div class="row justify-content-center" id="range-example-filters" data-mdb-items=".range-example-item" data-mdb-auto-filter="false">
<div class="col-md-12 mt-3 text-center">
<p class="fa-lg">Price:</p>
<label for="customRange" class="form-label">Min</label>
<input type="range" class="form-range" value="80" min="80" max="120" id="customRange" autocompleted="" />
<p id="min-val">Current: 80$</p>
<label for="customRange2" class="form-label">Max</label>
<input type="range" class="form-range" value="120" min="80" max="120" id="customRange2" autocompleted="" />
<p id="max-val">Current: 120$</p>
</div>
</div>
<div class="row text-center" id="range-example-data">
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-sale="yes" data-mdb-color="gray" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="blue" data-mdb-sale="no" data-mdb-price="90">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12.webp" class="card-img-top" alt="Blue Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Blue Jeans Jacket</h5>
<p class="card-text">90$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="red" data-mdb-sale="yes" data-mdb-price="120">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13.webp" class="card-img-top" alt="Red Hoodie" />
<div class="card-body">
<h5 class="card-title">Red Hoodie</h5>
<p class="card-text">
<span class="text-decoration-line-through">150$</span>
<span class="fw-bold fa-lg">120$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="black" data-mdb-sale="no" data-mdb-price="100">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15.webp" class="card-img-top" alt="Black Jeans Jacket" />
<div class="card-body">
<h5 class="card-title">Black Jeans Jacket</h5>
<p class="card-text">100$</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
<div class="col-md-4 mt-3 range-example-item" data-mdb-color="gray" data-mdb-sale="yes" data-mdb-price="80">
<div class="card shadow-2">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14.webp" class="card-img-top" alt="Gray Jumper" />
<div class="card-body">
<h5 class="card-title">Gray Jumper</h5>
<p class="card-text">
<span class="text-decoration-line-through">100$</span>
<span class="fw-bold fa-lg">80$</span>
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
</div>
</section>
</div>
</section>
<!--Section: Demo-->
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="mdb.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
C:\xampp8\htdocs\lva\script.js
(function () {
const customSort = document.getElementById('custom-sort');
const customSortData = document.getElementById('custom-sort-data');
const customSortAsc = document.getElementById('customSortBtn');
const customSortDesc = document.getElementById('customSortBtn2');
const dataset = [
{
id: 1,
color: 'black',
price: 100,
sale: 'no',
product: 'Black Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
},
{
id: 2,
color: 'black',
price: 100,
sale: 'no',
product: 'Black Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.webp',
},
{
id: 3,
color: 'gray',
price: 80,
sale: 'yes',
product: 'Gray Jumper',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
},
{
id: 4,
color: 'gray',
price: 80,
sale: 'yes',
product: 'Gray Jumper',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.webp',
},
{
id: 5,
color: 'red',
price: 120,
sale: 'yes',
product: 'Red Hoodie',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.webp',
},
{
id: 6,
color: 'blue',
price: 90,
sale: 'no',
product: 'Blue Jeans Jacket',
img: 'https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.webp',
},
];
const customSortInstance = new Filters(customSort, {
items: dataset,
});
const renderItems = (items) => {
const elements = items.map((item) => {
const template = `
<div class="col-md-4 mt-3">
<div class="card shadow-2">
<img src="${item.img}"
class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">${item.product}</h5>
<p class="card-text">
${item.price}$
</p>
<a href="#" class="btn btn-primary ripple-surface">Buy now</a>
</div>
</div>
</div>
`;
return template;
});
customSortData.innerHTML = elements.join('\n');
};
renderItems(dataset);
customSort.addEventListener('update.mdb.filters', (e) => {
renderItems(e.items);
});
customSortAsc.addEventListener('click', (e) => {
customSortInstance.sort('product', null, (firstItem, secondItem) => {
if (firstItem < secondItem) return -1;
if (firstItem > secondItem) return 1;
return 0;
});
});
customSortDesc.addEventListener('click', (e) => {
customSortInstance.sort('product', null, (firstItem, secondItem) => {
if (firstItem > secondItem) return -1;
if (firstItem < secondItem) return 1;
return 0;
});
});
})();
12. 8 Full example
C:\xampp8\htdocs\lva\script.js
(function() {
const filtersElement = document.getElementById('filters');
const content = document.getElementById('content');
const spinner = document.getElementById('spinner');
const sortSelect = document.getElementById('sort-select');
const filterRating = document.getElementById('filter-rating');
const priceInputs = [
'price-radio',
'price-radio2',
'price-radio3',
'price-radio4',
'price-radio5',
];
const getItems = () => {
return fetch('https://lva.com/products.json').then((data) => data.json());
};
const renderItems = (items) => {
content.style.display = 'flex';
spinner.style.display = 'none';
const elements = items.map((item) => {
const template = `
<div class="col-md-4 my-4 justify-content-center text-center animation fade-in">
<div class="bg-image hover-overlay hover-zoom hover-shadow ripple rounded">
<img src="${item.image}" class="img-fluid w-100" style="height: 325px" />
<a href="#!">
<div class="mask rounded" style="background-color: rgba(66, 66, 66, 0.2);"></div>
</a>
</div>
<div class="pt-4">
<h5>${item.name}</h5>
<strong>$${item.price}</strong>
</div>
</div>
`;
return template;
});
if (items.length === 0) {
return (content.innerHTML = `<h3 class="text-center mt-5">No items found</h3>`);
}
return (content.innerHTML = elements.join('\n'));
};
getItems().then((items) => {
const filtersInstance = new Filters(filtersElement, {
items,
});
renderItems(items);
filtersInstance.sort('rating', 'desc');
});
filtersElement.addEventListener('update.mdb.filters', (e) => {
content.style.display = 'none';
spinner.style.display = 'block';
renderItems(e.items);
});
sortSelect.addEventListener('optionSelect.mdb.select', (e) => {
const value = e.target.value;
const filtersInstance = Filters.getInstance(filtersElement);
if (value === '1') {
filtersInstance.sort('rating', 'desc');
}
if (value === '2') {
filtersInstance.sort('price');
}
if (value === '3') {
filtersInstance.sort('price', 'desc');
}
});
filterRating.addEventListener('onSelect.mdb.rating', (e) => {
const value = e.value;
const filtersInstance = Filters.getInstance(filtersElement);
filtersInstance.filter({
rating: [value],
});
});
document.getElementById(priceInputs[0]).addEventListener('change', () => {
const filtersInstance = Filters.getInstance(filtersElement);
filtersInstance.filter({
price: (price) => {
return price < 25;
},
});
});
document.getElementById(priceInputs[1]).addEventListener('change', () => {
const filtersInstance = Filters.getInstance(filtersElement);
filtersInstance.filter({
price: (price) => {
return price >= 25 && price < 50;
},
});
});
document.getElementById(priceInputs[2]).addEventListener('change', () => {
const filtersInstance = Filters.getInstance(filtersElement);
filtersInstance.filter({
price: (price) => {
return price >= 50 && price < 100;
},
});
});
document.getElementById(priceInputs[3]).addEventListener('change', () => {
const filtersInstance = Filters.getInstance(filtersElement);
filtersInstance.filter({
price: (price) => {
return price >= 100 && price < 200;
},
});
});
document.getElementById(priceInputs[4]).addEventListener('change', () => {
const filtersInstance = Filters.getInstance(filtersElement);
filtersInstance.filter({
price: (price) => {
return price >= 200;
},
});
});
})();
C:\xampp8\htdocs\lva\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>MDB Filters</title>
<!-- Favicon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="mdb.min.css" />
<!-- Plugin css file -->
<!-- Custom styles -->
<style></style>
</head>
<body>
<!-- Start your project here-->
<header>
<!-- Navbar -->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarExample01" aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="https://mdbecommerce.com/">
<i class="fab fa-mdb fa-2x" alt="mdb logo"></i>
</a>
<div class="collapse navbar-collapse ml-auto" id="navbarExample01">
<ul class="navbar-nav ml-auto">
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#"><span class="badge rounded-pill bg-danger">1</span><i class="fas fa-shopping-cart"></i></a>
</li>
<!-- Navbar dropdown -->
<li class="nav-item dropdown my-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
<i class="united kingdom flag m-0"></i>
</a>
<!-- Dropdown menu -->
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#">Shop</a>
</li>
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item my-auto">
<a class="nav-link active" aria-current="page" href="#">Sign in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><button type="button" class="btn btn-outline-dark btn-rounded" data-ripple-color="dark">
Sign up
</button></a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div class="p-5 text-center bg-image" style="
background-image: url('https://mdbootstrap.com/img/Photos/Others/clothes(5)-crop.jpg');
height: 400px;
">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Shop</h1>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
<main>
<div class="container mt-5">
<div class="row">
<div class="col-md-4">
<!-- Section: Sidebar -->
<section>
<!-- Section: Filters -->
<section id="filters" data-auto-filter="true">
<h5>Filters</h5>
<!-- Section: Condition -->
<section class="mb-4" data-filter="condition">
<h6 class="font-weight-bold mb-3">Condition</h6>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="new" id="condition-checkbox" />
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox">
New
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="used" id="condition-checkbox2" />
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox2">
Used
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="collectible" id="condition-checkbox3" />
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox3">
Collectible
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="renewed" id="condition-checkbox4" />
<label class="form-check-label text-uppercase small text-muted" for="condition-checkbox4">
Renewed
</label>
</div>
</section>
<!-- Section: Condition -->
<!-- Section: Avg. Customer Review -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Avg. Customer Review</h6>
<ul class="rating" data-toggle="rating" id="filter-rating">
<li>
<i class="far fa-star fa-sm text-primary" title="1"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="2"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="3"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="4"></i>
</li>
<li>
<i class="far fa-star fa-sm text-primary" title="5"></i>
</li>
</ul>
</section>
<!-- Section: Avg. Customer Review -->
<!-- Section: Price -->
<section class="mb-4">
<h6 class="font-weight-bold mb-3">Price</h6>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="price-radio" />
<label class="form-check-label text-uppercase small text-muted" for="price-radio">
Under $25
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="price-radio2" />
<label class="form-check-label text-uppercase small text-muted" for="price-radio2">
$25 to $50
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="price-radio3" />
<label class="form-check-label text-uppercase small text-muted" for="price-radio3">
$50 to $100
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="price-radio4" />
<label class="form-check-label text-uppercase small text-muted" for="price-radio4">
$100 to $200
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="price-radio5" />
<label class="form-check-label text-uppercase small text-muted" for="price-radio5">
$200 & above
</label>
</div>
</section>
<!-- Section: Price -->
<!-- Section: Size -->
<section class="mb-4" data-filter="size">
<h6 class="font-weight-bold mb-3">Size</h6>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="34" id="price-checkbox" />
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox">
34
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="36" id="price-checkbox2" />
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox2">
36
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="38" id="price-checkbox3" />
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox3">
38
</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="40" id="price-checkbox4" />
<label class="form-check-label text-uppercase small text-muted" for="price-checkbox4">
40
</label>
</div>
</section>
<!-- Section: Size -->
<!-- Section: Color -->
<section class="mb-4" data-filter="color">
<h6 class="font-weight-bold mb-3">Color</h6>
<div class="form-check form-check-inline m-0 p-0 pr-3">
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio1" value="white" />
<label class="btn bg-light btn-rounded p-3" for="colorRadio1"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pr-3">
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio2" value="grey" />
<label class="btn btn-rounded p-3" for="colorRadio2" style="background-color: #bdbdbd"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pr-3">
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio3" value="black" />
<label class="btn bg-dark text-white btn-rounded p-3" for="colorRadio3"></label>
</div>
<div class="form-check form-check-inline m-0 p-0 pr-3">
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio5" value="blue" />
<label class="btn bg-primary btn-rounded p-3" for="colorRadio5"></label>
</div>
<div class="form-check form-check-inline mt-3 mr-0 p-0 pr-3">
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio9" value="red" />
<label class="btn bg-danger btn-rounded p-3" for="colorRadio9"></label>
</div>
<div class="form-check form-check-inline mt-3 mr-0 p-0 pr-3">
<input class="btn-check" type="radio" name="colorRadio" id="colorRadio10" value="orange" />
<label class="btn bg-warning btn-rounded p-3" for="colorRadio10"></label>
</div>
</section>
<!-- Section: Color -->
</section>
<!-- Section: Filters -->
</section>
<!-- Section: Sidebar -->
</div>
<div class="col-md-8">
<div class="row justify-content-center">
<div class="col-md-6 my-auto py-3">
<select class="select" id="sort-select">
<option value="1">Best rating</option>
<option value="2">Lowest price first</option>
<option value="3">Highest price first</option>
</select>
<label class="form-label select-label">Sort</label>
</div>
</div>
<div class="row mb-4" id="content"></div>
<div class="row">
<div class="col-md-12 mt-3 text-center">
<div class="spinner-border text-primary mx-auto my-5" id="spinner" role="status" style="display: none">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-dark text-white text-center text-lg-left">
<!-- Socials -->
<div class="bg-primary text-center p-3">
<div class="row">
<div class="col-md-6">
<span class="font-weight-bold">Get connected with us on social networks!</span>
</div>
<div class="col-md-6">
<i class="fab fa-instagram"></i>
<i class="fab fa-linkedin-in ml-4"></i>
<i class="fab fa-twitter ml-4"></i>
<i class="fab fa-facebook-f ml-4"></i>
</div>
</div>
</div>
<!-- Socials -->
<!-- Grid container -->
<div class="container p-5">
<!--Grid row-->
<div class="row p-2">
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">About me</h5>
<hr class="mb-4 mt-0" />
<p>
Here you can use rows and columns to organize your footer content. Lorem ipsum dolor
sit amet, consectetur adipisicing elit.
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Products</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled mb-0">
<li class="mb-2">
<a href="#!" class="text-white">MDBootstrap</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">MDWordPress</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">BrandFlow</a>
</li>
<li>
<a href="#!" class="text-white">Bootstrap Angular</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Useful links</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled">
<li class="mb-2">
<a href="#!" class="text-white">Your Account</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">Become an Affiliate</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white">Shipping Rates</a>
</li>
<li>
<a href="#!" class="text-white">Help</a>
</li>
</ul>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 mx-auto py-4">
<h5 class="text-uppercase">Contacts</h5>
<hr class="mb-4 mt-0" />
<ul class="list-unstyled">
<li class="mb-2">
<a href="#!" class="text-white"><i class="far fa-map mr-1"></i> New York, Avenue Street 10</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white"><i class="fas fa-phone-alt mr-1"></i> 042 876 836 908</a>
</li>
<li class="mb-2">
<a href="#!" class="text-white"><i class="far fa-envelope mr-1"></i> company@example.com</a>
</li>
<li>
<a href="#!" class="text-white"><i class="far fa-clock mr-1"></i> Monday - Friday: 10-17</a>
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- MDB -->
<script type="text/javascript" src="mdb.min.js"></script>
<!-- Plugin js file -->
<script type="text/javascript" src="filters.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Custom scripts -->
</body>
</html>
PreviousCách sử dụng jQuery trong sweetAlert2 là chúng ta phải sử dụng didOpen full (ok)NextChú ý nếu lỗi cảnh báo từ khóa new nếu dùng trong js thường chúng ta sẽ sử dụng trong mudule (ok)
Last updated
