datatables插件真正实现前后台交互

此账号已被盗

已于 2024-09-06 12:46:25 修改

阅读量908

点赞数

文章标签：前端后台

于 2019-04-28 17:44:47 首次发布

本文链接：https://blog.csdn.net/zoukami/article/details/89642638

版权

使用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”