使用datatables如果没后端的事还好说,前端一次性获取全部数据进行分页,没什么麻烦,但是要后台分页返回数据,加上前端、后端也不是很懂datatables插件的话,就有可能出现以下对话,前端对后端说:“我要传什么给你?”,后端对前端说:“我要接收什么?我要返回什么给你?”
没办法,自己找的datatables插件,只能先自己解决才能要求后端了
最终效果有点丑,但功能实现了。。。
我采用的是nodejs+mysql做api接口
mysql数据库
数据库名:data_table
表名:test
nodejs后端代码
const Koa = require('koa');
const cors = require('koa2-cors');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database: 'data_table'
});
try {
connection.connect();
console.log("连接成功")
} catch (err) {
throw (err)
}
const app = new Koa();
app.use(cors());
app.use(bodyParser());
let router = new Router();
let query = function () {
return new Promise((resolve, reject) => {
connection.query('SELECT * FROM test', function (error, results) {
if (error) {
reject(error)
} else {
resolve(results)
};
});
})
}
router.get('/test', async (ctx, next) => {
let sEcho = ctx.query.sEcho 前端传的
let iDisplayStart = Number(ctx.query.iDisplayStart) //前端传的
let iDisplayLength = ctx.query.iDisplayLength //前端传的
let currentPage = Math.ceil(iDisplayStart / iDisplayLength) + 1 //当前页码
let rows = await query()
let total = rows.length //总数据量
let pageNum = Math.ceil(total / iDisplayLength) //分页数
let rowsName = rows.slice(iDisplayStart, iDisplayLength * currentPage) //分页后显示当前数据
ctx.body = {
status: 1,
aData: rowsName, //前端如果接收的是aData,必须返回aData
iTotalRecords: pageNum, //必须返回iTotalRecords
iTotalDisplayRecords: total, //必须返回iTotalDisplayRecords
sEcho: sEcho //原路返回,必须返回sEcho
}
})
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
前端代码
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript"
src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<title>test</title>
</head>
<body>
<div class="margin clearfix">
<div class="cover_style" id="cover_style">
<div class="">
<table class="table table-striped table-bordered table-hover" id="example">
<thead>
<tr>
<th width="">ID</th>
<th width="">用户名</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
jQuery(function($) {
//初始化table
var oTable1 = $('#example')
.dataTable(
{
"bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
"sPaginationType": "full_numbers", //翻页界面类型
"bDestroy" : true,
"bServerSide" : true,//服务器处理分页,默认是false,需要服务器处理,必须true
"sAjaxDataProp" : "aData",//是服务器分页的标志,必须有
"sAjaxSource" : "http://localhost:3000/test",//通过ajax实现分页的url路径。
"aoColumns" : [//初始化要显示的列
{
"data" : "id"
},
{
"data" : "name"
} ],
"oLanguage": { //汉化
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据;总共有 _TOTAL_ 条记录",
"sInfoEmtpy": "没有数据",
"sProcessing": "正在加载数据...",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前页",
"sNext": "后页",
"sLast": "尾页"
}
}
});
});
</script>
大功告成,基本功能就实现了
终于可以跟后端说:“要接收的是sEcho、iDisplayStart、iDisplayLength,返回的要aData、iTotalRecords、iTotalDisplayRecords、sEcho”