极客教程DataTables pagingType选项
DataTables是一个jQuery插件，可用于为网页的HTML表格添加互动和高级控件。这也使得表中的数据可以根据用户的需要进行搜索、排序和过滤。DataTable还暴露了一个强大的API，可以进一步用来修改数据的显示方式。
pagingType 选项用于指定在DataTable下面显示的分页控件的类型。它接受一个字符串值，可以通过使用6种内置的可用控件类型来指定。这些都是由以下数值指定的。
- simple。在这种类型的控件中，只显示’上一个’和’下一个’按钮。
- simple_numbers:在这种类型的控件中，”上一页 “和 “下一页 “按钮与页码一起被显示。
- full。在这种类型的控制中，只有 “第一个”、”上一个”、”下一个 “和 “最后一个 “按钮被显示。
- full_numbers:在这种类型的控件中，”第一个”、”上一个”、”下一个 “和 “最后一个 “按钮会和页码一起显示。
- numbers。在这种类型的控件中，只显示页码。
- first_last_numbers:在这种类型的控件中，”第一个 “和 “最后一个 “按钮会和页码一起显示。
其他类型可以使用DataTable插件添加。
语法:
{ pagingType: value }
参数：该选项有一个上面提到的和下面描述的单一值。
- value。这是一个字符串值，指定将被显示的控件类型。
下面的例子说明了这个选项的使用。我们将看到DataTables内置的所有不同的分页类型。
例子1：在这种类型的控件中，按钮与页码一起显示。
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: numbers</h4>
<table id="table_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
(document).ready(function () {
('#table_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "numbers"
});
});
</script>
</body>
</html>
输出:
例子2：在这种类型的控件中，只显示 “上一个 “和 “下一个 “按钮。
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: simple</h4>
<table id="table_simple"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
(document).ready(function () {
('#table_simple').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "simple"
});
});
</script>
</body>
</html>
输出:
例子3：在这种类型的控件中，”上一页 “和 “下一页 “按钮与页码一起显示。
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: simple_numbers</h4>
<table id="table_simple_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
(document).ready(function () {
('#table_simple_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "simple_numbers"
});
});
</script>
</body>
</html>
输出:
例子4：在这种类型的控件中，只有 “第一个”、”上一个”、”下一个 “和 “最后一个 “按钮被显示。
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: full</h4>
<table id="table_full"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
(document).ready(function () {
('#table_full').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "full"
});
});
</script>
</body>
</html>
输出:
例子5：在这种类型的控件中，”第一个”、”上一个”、”下一个 “和 “最后一个 “按钮与页码一起被显示。
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: full_numbers</h4>
<table id="table_full_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
(document).ready(function () {
('#table_full_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "full_numbers"
});
});
</script>
</body>
</html>
输出:
例子6：在这种类型的控件中，”第一 “和 “最后 “按钮与页码一起显示。
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: first_last_numbers</h4>
<table id="table_first_last_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
(document).ready(function () {
('#table_first_last_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "first_last_numbers"
});
});
</script>
</body>
</html>
输出:
