node和bootstrap-table实现最简单的服务端分页

之前为了实现这个table分页效果找了很多例子,但因为服务端的解释并不是很清楚而且服务端也不是用js写的,所以自己动手用node实现了服务端,都是很简单的例子,方便理解

1.html页面

首先要引入必要的jquery,bootstap以及bootstrap-table依赖,注意引入顺序,其次在div添加一个table:
test.html:


<html lang="en">
<head>
    <meta charset="utf-8">
    <title>table分页title>
    <link rel="stylesheet" href="build/bootstrap.min.css">
    <link rel="stylesheet" href="build/bootstrap-table.min.css">
    <script defer src="build/jquery-3.1.1.min.js">script>
    <script defer src="build/bootstrap.js">script>
    <script defer src="build/bootstrap-table.js">script>
    <script defer src="build/bootstrap-table-zh-CN.min.js">script>
    <script defer src="test.js">script>
head>
<body>
<div >
    <table id="table">
    table>
div>
body>
html>

2.js文件:

我们在html引入test.js文件,里面的例子网上很多,各个参数以及更多参数的使用也请自行去查找,拿最简单的例子来说:
test.js:

$("#table").bootstrapTable({
  method: 'GET', //请求的方式,
  contentType: "application/x-www-form-urlencoded",
  url:"http://127.0.0.1:8081/",//要请求数据的文件路径,这是我们服务端给的接口,待会用服务端通过这个接口将要显示内容的数据返回到table进行显示
  pageNumber: 1, //初始化加载第一页,默认第一页
  pagination:true,//是否分页
  queryParams:queryParams,//请求服务器时所传的参数,服务端分页的时候一定要有这个函数,这个函数的返回值相当于查询要显示内容数据的参数,表格内容数据的获取取决于这个方法
  sidePagination:'server',//指定服务器端分页
  pageSize:5,//单页记录数
  pageList:[5,10,20],//分页步进值
  columns: [{
    field: 'id',
    title: '编号'
  }, {
    field: 'name',
    title: '姓名'
  }, {
    field: 'age',
    title: '年龄'
  }]
});
//请求服务数据时所传参数
function queryParams(params){
  return {
    pageSize : params.limit, //每一页的数据行数,默认是上面设置的5(pageSize)
    pageIndex : params.offset/params.limit+1, //当前页面,默认是上面设置的1(pageNumber)
  }
}

3.服务端:

在这里我们用node实现上面需要的http://127.0.0.1:8081接口,关于node的ubuntu安装可以参考我之前的文章:ubuntu安装webpack
server.js:

var http = require('http');
var url = require('url');
var util = require('util');
var data1 = {
  total: 10,
  rows: [
    {id: "1", name: "tom", age: "12"},
    {id: "2", name: "tom", age: "12"},
    {id: "3", name: "tom", age: "12"},
    {id: "4", name: "tom", age: "12"},
    {id: "5", name: "tom", age: "12"}
  ]
};
var data2 = {
  total: 10,
  rows: [
    {id: "6", name: "tom", age: "12"},
    {id: "7", name: "tom", age: "12"},
    {id: "8", name: "tom", age: "12"},
    {id: "9", name: "tom", age: "12"},
    {id: "10", name: "tom", age: "12"},
  ]
};
var data3 = {
  total: 10,
  rows: [
    {id: "1", name: "tom", age: "12"},
    {id: "2", name: "tom", age: "12"},
    {id: "3", name: "tom", age: "12"},
    {id: "4", name: "tom", age: "12"},
    {id: "5", name: "tom", age: "12"},
    {id: "6", name: "tom", age: "12"},
    {id: "7", name: "tom", age: "12"},
    {id: "8", name: "tom", age: "12"},
    {id: "9", name: "tom", age: "12"},
    {id: "10", name: "tom", age: "12"}
  ]
};
http.createServer(function (request, response) {
  // 发送 HTTP 头部
  // HTTP 状态值: 200 : OK
  response.writeHead(200, {"Content-Type": "text/plain", "Access-Control-Allow-Origin": "*"});
  var params = url.parse(request.url, true).query;
  if (params.pageIndex === "1" && params.pageSize === "5") {
    response.write(JSON.stringify(data1));
  } else if (params.pageIndex === "2" && params.pageSize === "5") {
    response.write(JSON.stringify(data2));
  } else {
    response.write(JSON.stringify(data3));
  }
  response.end();
}).listen(8081);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8081/');

注意服务端分页返回的数据格式,必须有totalrows两个字段,
total:返回所有数据总数的,这个数字是客户端为了计算一共多少页,当前在多少页显示多少内容的
rows:数据的内容,代表当前请求回去要显示在页面上的内容
比如data1,total为10,rows有5行数据,
我们根据pageIndex为1和pageSize为5返回这组数据,代表一共有10个数据,而pageSize为5则要分2页,当前是第1页的内容,而data2则返回第2页的内容
再比如data3,total为10,rows有10行数据,
根据pageIndex为1和pageSize为10返回这组数据,代表一共有10个数据,而pageSize为10则只要分1页,当前是所有内容

服务端写好之后,我们用node启动服务:

node server

启动成功之后会看到相应的log:

Server running at http://127.0.0.1:8081/

我们在浏览器打开http://127.0.0.1:8081/能看到返回结果字符串,说明服务端没有问题了,
然后打开用浏览器打开test.html,就可以看到效果了:
node和bootstrap-table实现最简单的服务端分页_第1张图片
点击数字2切换到第二页:
node和bootstrap-table实现最简单的服务端分页_第2张图片
改变每页显示条数为10:
node和bootstrap-table实现最简单的服务端分页_第3张图片
在我们点击页码数字切换和改变当前页面显示数时,其实是重新发送请求,

  • 从第一页切换到第二页:127.0.0.1:8081?pageSize=5&pageIndex=2
  • 从第二页切换到第一页:127.0.0.1:8081?pageSize=5&pageIndex=1
  • 将页面显示数从5改成10:127.0.0.1:8081?pageSize=10&pageIndex=1

其实也就是我们在request中取出pageSize和pageIndex参数,然后根据这两个参数返回相应的数据

相信通过上面的例子已经明白客户端分页的原理和实现方法了,更多的关于参数也是在queryParams中添加,比如搜索框的参数等,这里不再详述

4.实现中遇到的问题

在写例子时,server的response头部要加跨域访问的权限,否则会报错:

response.writeHead(200, {"Content-Type": "text/plain", "Access-Control-Allow-Origin": "*"});

此外在发送请求时请设置bootstrap-table请求的contentType,否则会报Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.的错误

contentType: "application/x-www-form-urlencoded",

你可能感兴趣的:(html5,bootstrap-table,node,table分页,服务端分页)