簡易程式碼如下：
JS 如下：
$.fn.extend({
table: function (opts) {
const tableConfig = {
mode: 'debug'
}
const tablePreset = {
limit: 10,
}
// The instance
const Table = {
page: 1,
}
const { data, cols, limit } = opts
if (tableConfig === 'debug') {
Table.options = opts
} else {
Table.options = {
cols: cols,
limit: limit,
}
}
const $rootEle = $(this)
const tHead = Table.tHead = $rootEle.find('thead')
const tBody = Table.tBody = $rootEle.find('tbody')
//#region Render
function renderTableHead() {
const ths = cols.map(z => {
const sortable = z.sort ? ` sortable` : ''
const dataField = ` data-field="${z.field}"` || ''
return `<th scope="col"${dataField}${sortable}>${z.title || ''}</th>`
})
tHead.html(`<tr>${ths.join('')}</tr>`)
}
function renderTableBody() {
const renderRows = getRenderRows()
const _trs = renderRows.map((row, i) => {
const _cols = cols.map((col, j) => {
if (col.type === 'index') {
const checkbox = col.checkbox ? `<input type="checkbox" style="margin-right: 7px;" />` : ''
return `<th scope="row">${checkbox}${i + 1}</th>`
}
return `<td>${row[col.field] || ''}</td>`
})
return `<tr data-index="${i}">${_cols.join('')}</tr>`
})
tBody.html(_trs.join(''))
}
//#endregion
//#region Template
//#endregion
//#region Utils
const getPagedRows = (rows) => {
const pageIndex = Table.page;
const pageSize = limit || tablePreset.limit;
const startIndex = (pageIndex - 1) * pageSize;
const stopIndex = startIndex + pageSize;
return (rows || data).slice(startIndex, stopIndex);
}
const getRenderRows = () => {
if (limit) {
return getPagedRows()
}
return data
}
//#endregion
renderTableHead()
renderTableBody()
}
})
HTML：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>jquery-table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" />
<style>
body,
#root {
width: 100vw;
height: 100vh;
box-sizing: border-box;
overflow: hidden;
}
#root {
display: flex;
place-items: center;
}
</style>
</head>
<body>
<div id="root">
<div class="container">
<table id="jTable" class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.1-beta1/mock-min.js"
integrity="sha512-C6haFoe26x0I8R2daqjCKMYlOvq++RXhACOBluxWpZdScv5kuIMrQtxAVweoRqWUlvF0bKtCSEI0f561tRQhtw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/table.js"> </script>
<script>
let data = [{
name: 'hello',
gender: 'boy',
age: '19',
city: 'beijing',
phone: '15423235656',
email: '1455646437@qq.com',
identity: '364202200102121245',
}]
for (let i = 0; i < 36; i++) {
data.push({
name: 'hello',
gender: 'boy',
age: '19',
city: 'beijing',
phone: '15423235656',
email: '1455646437@qq.com',
identity: '364202200102121245',
})
}
const cols = [
{
type: 'index',
checkbox: true,
title: '#'
},
{
field: 'name',
title: 'name',
sort: true,
},
{
field: 'gender',
title: 'gender',
sort: true,
},
{
field: 'age',
title: 'age',
sort: true,
},
{
field: 'city',
title: 'city',
sort: true,
},
{
field: 'phone',
title: 'phone',
sort: true,
},
{
field: 'email',
title: 'email',
sort: true,
},
{
field: 'identity',
title: 'identity',
sort: true,
},
]
$('#jTable').table({
data: data,
cols: cols,
limit: 10,
events: {
'action-delete': function (row) {
},
'action-check': function (row) {
}
}
})
</script>
</body>
</html>