用ROW_NUMBER() 实现分页功能

本文深入探讨了SQL Server中三种常见的分页技术实现方式,并对其性能进行了详细对比分析,旨在帮助开发者选择最适合其需求的分页策略。

ECLARE @pagenum AS INT, @pagesize AS INT
SET @pagenum = 2
SET @pagesize = 3
SELECT *
FROM (SELECT ROW_NUMBER() OVER(ORDER BY newsid DESC) AS rownum, 
        newsid, topic, ntime, hits
      FROM news) AS D
WHERE rownum BETWEEN (@pagenum-1)*@pagesize+1 AND @pagenum*@pagesize
ORDER BY newsid DESC

aspx里面只需给sql传入pageid和条数即可。

其余分页:

方法1:
适用于 SQL Server 2000/2005

SELECT   TOP  页大小  *
FROM  table1
WHERE  id  NOT   IN
          (
          
SELECT   TOP  页大小 * ( - 1 ) id  FROM  table1  ORDER   BY  id
          )
ORDER   BY  id

方法2:
适用于 SQL Server 2000/2005
SELECT   TOP  页大小  *
FROM  table1
WHERE  id  >
          (
          
SELECT   ISNULL ( MAX (id), 0
          FROM  
                (
                
SELECT   TOP  页大小 * ( - 1 ) id  FROM  table1  ORDER   BY  id
               
A
          )
ORDER   BY  id

方法3:
适用于 SQL Server 2005

SELECT   TOP  页大小  *  
FROM  
        (
        
SELECT  ROW_NUMBER()  OVER  ( ORDER   BY  id)  AS  RowNumber, *   FROM  table1
        A
WHERE  RowNumber  >  页大小 * (页数 - 1 )


说明,页大小:每页的行数;页数:第几页。使用时,请把“页大小”和“页大小*(页数-1)”替换成数字。

 

其它的方案:如果没有主键,可以用临时表,也可以用方案三做,但是效率会低。
建议优化的时候,加上主键和索引,查询效率会提高。

通过SQL 查询分析器,显示比较:我的结论是:
分页方案二:(利用ID大于多少和SELECT TOP分页)效率最高,需要拼接SQL语句
分页方案一:(利用Not In和SELECT TOP分页)   效率次之,需要拼接SQL语句
分页方案三:(利用SQL的游标存储过程分页)    效率最差,但是最为通用

如果reportingmanagersonList: []中的每一项样品名称相同,在第一页页眉展示<!-- 页眉 --> <div class="header"> <p>报告编号:{{ dataForm.checknum}}</p> <p>样品名称:{{ dataForm.productname}} &nbsp;&nbsp;&nbsp;&nbsp;试验地点:实验室</p> </div>,接下来展示<table class="report-table"></table>信息,满足每页表格高度固定为 920px 行高根据内容自适应,除最后一页外,其他页在内容高度未满 920px 时,将剩余空间平均分配给该页的每一行 最后一页不进行行高均分,只按内容实际高度展示 如果reportingmanagersonList: []中的每一项样品名称不相同在第一页页眉展示样品:名称1<!-- 页眉 --> <div class="header"> <p>报告编号:{{ dataForm.checknum}}</p> <p>样品名称:{{ dataForm.productname}} &nbsp;&nbsp;&nbsp;&nbsp;试验地点:实验室</p> </div>,接下来展示<table class="report-table"></table>信息,足每页表格高度固定为 920px 行高根据内容自适应,除最后一页外,其他页在内容高度未满 920px 时,将剩余空间平均分配给该页的每一行 最后一页不进行行高均分,只按内容实际高度展示。再开始下一页另一个样品名称:样品2。一次类推。 如果reportingmanagersonList中统计出来的不同样品名称较多,且项目每个少于5个,就将合并显示按照顺序依次展示。展示时<td>{{ row.testingitems }}</td>改为<td>{{ row.testingitems+row.samplename }}</td>
最新发布
08-23
<template> <div class="box" align="center"> <div> <el-input v-model.trim="catIdInput" placeholder="请输入要查询的猫咪编号..." maxlength="18" style="width: 20%;margin-right: 10px;" v-on:keypress.enter="search()" /> <el-button type="primary" @click="search()">查询</el-button> <el-button type="primary" style="margin-right: 5px" @click="addOne()">添加</el-button> </div> <div> <el-table v-bind:data="info.slice((currentPage - 1) * pageSize, currentPage * pageSize)" align="center" :header-cell-style="{ 'background-color': '#C1F5F8', 'color': '#606266', 'font-weight': 'bold', 'font-size': '13px', 'text-align': 'center' }" v-bind:cell-style="{ 'text-align': 'center' }" :row-style="tableRowStyle" style="width: 100%"> <el-table-column prop="猫咪编号" label="猫咪编号" width="80"></el-table-column> <el-table-column prop="猫咪类别" label="猫咪类别" width="80"></el-table-column> <el-table-column prop="猫咪名字" label="猫咪名字" width="60"></el-table-column> <el-table-column prop="品种" label="品种" width="80"></el-table-column> <el-table-column prop="毛色" label="毛色" width="80"></el-table-column> <el-table-column prop="出生日期" label="出生日期" width="150" :formatter="formatDate"></el-table-column> <el-table-column prop="性别" label="性别" width="60"></el-table-column> <el-table-column prop="价格" label="价格" width="80px"></el-table-column> <el-table-column prop="库存数量" label="库存数量" width="80px"></el-table-column> <el-table-column prop="折扣" label="折扣" width="80px"></el-table-column> <el-table-column label="照片" width="80"> <template v-slot="scope"> <el-image v-if="scope.row.pic" :src="require('../assets/img/' + scope.row.pic)" :preview-src-list="[require('../assets/img/' + scope.row.pic)]"> </el-image> </template> </el-table-column> <el-table-column label="操作" width="150"> <template v-slot="scope"> <el-button size="small" type="primary" @click="updateOne(scope.row.猫咪编号)">编辑</el-button> <el-button size="small" type="danger" @click="delOne(scope.row.猫咪编号)">删除</el-button> </template> </el-table-column> </el-table> </div> <!--分页显示设置--> <div> <el-pagination style="width: 70%; text-align: center; margin: 20px 500px" align="center" v-model:currentPage="currentPage" v-model:page-size="pageSize" v-bind:page-sizes="[3, 6, 8, 10]" :small="small" :disabled="disabled" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="info.length" v-on:size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> <!--添加对话框--> <el-dialog align-center align="center" title="添加新猫咪信息" v-model="dialogVisible_add" v-bind:append-to-body="true" width="50%"> <div> <el-table :data="info_add" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" align="center" :header-cell-style="{ 'background-color': '#C1F5F8', color: '#606266', 'font-wight': '100', 'font-size': '15px', 'text-align': 'center', }" :cell-style="{ 'text-align': 'center' }" :row-style="tableRowStyle" style="width:100%" @cell-click="tabclick"> <el-table-column prop="猫咪编号" label="猫咪编号" width="100px"> <el-input v-model.trim="catIdInput_add" maxlength="10" size="small"></el-input> </el-table-column> <el-table-column prop="猫咪类别" label="猫咪类别" width="100px"> <el-input v-model.trim="catTypeInput_add" maxlength="10" size="small"></el-input> </el-table-column> <el-table-column prop="猫咪名字" label="猫咪名字" width="80px"> <el-input v-model.trim="catNameInput_add" maxlength="10" size="small"></el-input> </el-table-column> <el-table-column prop="品种" label="品种" width="120px"> <el-input v-model.trim="breedInput_add" maxlength="20" size="small"></el-input> </el-table-column> <el-table-column prop="毛色" label="毛色" width="80px"> <el-input v-model.trim="colorInput_add" maxlength="50" size="small"></el-input> </el-table-column> <el-table-column prop="出生日期" label="出生日期" width="150px"> <el-date-picker v-model="birthDateInput_add" style="width: 100%" type="datetime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="small"> </el-date-picker> </el-table-column> <el-table-column prop="性别" label="性别" width="80px"> <el-radio-group v-model="genderInput_add" v-if="dialogVisible_add" size="small"> <el-radio-button label="公">公</el-radio-button> <el-radio-button label="母">母</el-radio-button> </el-radio-group> </el-table-column> <el-table-column prop="价格" label="价格" width="80px"> <el-input v-model.trim="priceInput_add" type="number" size="small"></el-input> </el-table-column> <el-table-column prop="库存数量" label="库存数量" width="80px"> <el-input v-model.trim="stockInput_add" type="number" size="small"></el-input> </el-table-column> <el-table-column prop="折扣" label="折扣" width="80px"> <el-input v-model.trim="discountInput_add" type="number" size="small"></el-input> </el-table-column> <el-table-column label="照片" width="150px"> <input style="vertical-align: middle" type="file" id="f" accept="image/jpeg/png/gif" v-on:change="show()"> <!-- 图片显示 --> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img style="vertical-align: middle; width: 40px; height: 60px" id="img" src="../assets/img/logocats.png" /> </span> </el-table-column> </el-table> </div> <p></p> <span align="center"> <el-button size="small" type="primary" @click="add()">确 定</el-button> <el-button align="center" size="small" @click="dialogVisible_add = false">取消</el-button></span> </el-dialog> <!--修改对话框--> <el-dialog align-center align="center" title="修改当前猫咪信息" v-model="dialogVisible_update" v-bind:append-to-body="true" width="60%"> <div> <el-table :data="info_update" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" align="center" :header-cell-style="{ 'background-color': '#C1F5F8', color: '#606266', 'font-wight': '100', 'font-size': '15px', 'text-align': 'center', }" :cell-style="{ 'text-align': 'center' }" :row-style="tableRowStyle" style="width:100%"> <el-table-column prop="猫咪编号" label="猫咪编号" width="100px"> <el-input v-model.trim="catIdInput_update" maxlength="10" size="small"></el-input> </el-table-column> <el-table-column prop="猫咪类别" label="猫咪类别" width="100px"> <el-input v-model.trim="catTypeInput_update" maxlength="10" size="small"></el-input> </el-table-column> <el-table-column prop="猫咪名字" label="猫咪名字" width="80px"> <el-input v-model.trim="catNameInput_update" maxlength="10" size="small"></el-input> </el-table-column> <el-table-column prop="品种" label="品种" width="120px"> <el-input v-model.trim="breedInput_update" maxlength="20" size="small"></el-input> </el-table-column> <el-table-column prop="毛色" label="毛色" width="80px"> <el-input v-model.trim="colorInput_update" maxlength="50" size="small"></el-input> </el-table-column> <el-table-column prop="出生日期" label="出生日期" width="150px"> <el-date-picker v-model="birthDateInput_update" style="width: 100%" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="small"> </el-date-picker> </el-table-column> <el-table-column prop="性别" label="性别" width="80px"> <el-radio-group v-model="genderInput_update" v-if="dialogVisible_update" size="small"> <el-radio-button label="公">公</el-radio-button> <el-radio-button label="母">母</el-radio-button> </el-radio-group> </el-table-column> <el-table-column prop="价格" label="价格" width="80px"> <el-input v-model.trim="priceInput_update" type="number" size="small"></el-input> </el-table-column> <el-table-column prop="库存数量" label="库存数量" width="80px"> <el-input v-model.trim="stockInput_update" type="number" size="small"></el-input> </el-table-column> <el-table-column prop="折扣" label="折扣" width="80px"> <el-input v-model.trim="discountInput_update" type="number" size="small"></el-input> </el-table-column> <el-table-column label="照片" width="150px"> <input style="vertical-align: middle" type="file" id="f" accept="image/jpeg/png/gif" v-on:change="show()"> <!-- 图片显示 --> <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img style="vertical-align: middle; width: 40px; height: 60px" id="img" v-if="pictInput_update" :src="require('../assets/img/' + pictInput_update)" /> </span> </el-table-column> </el-table> </div> <p></p> <span align="center"> <el-button size="small" type="primary" @click="update()">确 定</el-button> <el-button align="center" size="small" @click="dialogVisible_update = false">取消</el-button></span> </el-dialog> </div> </template> <script> import axios from 'axios'; export default { name: "CatManage", data() { return { catIdInput: "", //查询 info: [], tableRowStyle: {}, small: false, disabled: false, loading: false, currentPage: 1, //分页器中的初始页 pageSize: 10, //每页的行数 formatDate(row, column) { // 实现日期格式化 const date = row[column.property]; if (date) { return date.substring(0, 10); // 只显示年月日部分 } return ''; }, dialogVisible_add: false, catIdInput_add: "", catTypeInput_add: "", catNameInput_add: "", breedInput_add: "", colorInput_add: "", birthDateInput_add: "", genderInput_add: "母", priceInput_add: "", stockInput_add: "", discountInput_add: "", pictInput_add: "../assets/img/logocats.png", info_add: [ //添加用户对话框表格的数据对象 { 猫咪编号: "", 猫咪类别: "", 猫咪名字: "", 品种: "", 毛色: "", 出生日期: "", 性别: "母", 价格: "", 库存数量: "", 折扣: "", 照片: "../assets/img/logocats.png", }, ], dialogVisible_update: false, catIdInput_update: "", catTypeInput_update: "", catNameInput_update: "", breedInput_update: "", colorInput_update: "", birthDateInput_update: "", genderInput_update: "", priceInput_update: "", stockInput_update: "", discountInput_update: "", pictInput_update: "", info_update: [ //修改用户对话框表格的数据对象 { 猫咪编号: "", 猫咪类别: "", 猫咪名字: "", 品种: "", 毛色: "", 出生日期: "", 性别: "", 价格: "", 库存数量: "", 折扣: "", 照片: "", } ] }; }, created() { //查找members表全部数据 axios .get("http://127.0.0.1/cat/all") .then((res) => { console.log(res.data); this.info = res.data; }) .catch((err) => { console.log("获取数据失败" + err); }); }, methods: { //分页器方法 handleSizeChange(size) { this.pageSize = size; }, //分页器方法 handleCurrentChange(size) { this.currentPage = size; }, all() { axios .get("http://127.0.0.1/cat/all") .then((res) => { console.log(res.data); this.info = res.data; }) .catch((err) => { console.log("获取数据失败" + err); }); }, search() { console.log(this.catIdInput); axios .get("http://127.0.0.1/cat/searchCatId", { params: { catIdInput: this.catIdInput } }) // 根据结果进行处理 .then((res) => { console.log(res.data); this.info = res.data; }) // 异常处理 .catch((err) => { console.log("操作失败!" + err); }); }, //添加操作,显示添加对话框 addOne() { (this.catIdInput_add = ""), (this.catTypeInput_add = ""), (this.catNameInput_add = ""), (this.breedInput_add = ""), (this.colorInput_add = ""), (this.birthDateInput_add = ""), (this.genderInput_add = "母"), // 默认值设为"母" (this.priceInput_add = ""), (this.stockInput_add = ""), (this.discountInput_add = ""), (this.pictInput_add = "../assets/img/logocats.png"), (this.dialogVisible_add = true); // 显示添加对话框 }, add() { // 1.完整性检查 if ( (this.catIdInput_add.length == 0) || (this.catTypeInput_add.length == 0) || (this.catNameInput_add.length == 0) || (this.breedInput_add.length == 0) || (this.colorInput_add.length == 0) || (this.birthDateInput_add.length == 0) || (this.genderInput_add.length == 0) || (this.priceInput_add.length == 0) || (this.stockInput_add.length == 0) || (this.discountInput_add.length == 0) ) { this.$message({ type: "warning", message: "猫咪信息不可为空,请重新添加", }); return false; } // 2.正确性检查 else if (this.catIdInput_add.length < 3 || this.catIdInput_add.length > 10) { this.$message({ type: "warning", message: "猫咪编号长度需要在3~10个字符之间,请重新输入!", }); return false; } else if (this.catNameInput_add.length < 1 || this.catNameInput_add.length > 10) { this.$message({ type: "warning", message: "猫咪名字长度需要在1~10个字符之间,请重新输入!", }); return false; } else if (isNaN(this.priceInput_add) || this.priceInput_add <= 0) { this.$message({ type: "warning", message: "价格必须是正数,请重新输入!", }); return false; } else if (isNaN(this.stockInput_add) || this.stockInput_add < 0) { this.$message({ type: "warning", message: "库存数量必须是非负整数,请重新输入!", }); return false; } else if (isNaN(this.discountInput_add) || this.discountInput_add < 0 || this.discountInput_add > 1) { this.$message({ type: "warning", message: "折扣必须是0-1之间的小数,请重新输入!", }); return false; } else { axios // 检查是否已存在相同猫咪编号 .get("http://127.0.0.1/cat/get", { params: { catIdInput: this.catIdInput_add, }, }) .then((res) => { console.log(res.data); if (res.data.length == 0) { // 如果无相同猫咪编号,可以添加新猫咪 axios // 添加新猫咪 .get("http://127.0.0.1/cat/add", { params: { catIdInput: this.catIdInput_add, catTypeInput: this.catTypeInput_add, catNameInput: this.catNameInput_add, breedInput: this.breedInput_add, colorInput: this.colorInput_add, birthDateInput: this.birthDateInput_add, genderInput: this.genderInput_add, priceInput: this.priceInput_add, stockInput: this.stockInput_add, discountInput: this.discountInput_add, pictInput: this.pictInput_add }, }) .then((res) => { console.log(res.data); if (res.data.status == 200) { this.dialogVisible_add = false; // 关闭添加对话框 this.$message({ type: "warning", message: "猫咪信息已添加成功!", }); this.all(); // 刷新页面显示内容 } else { this.$message({ message: "添加失败", type: "error" }); } }) .catch((err) => { console.log("操作失败" + err); }); } else { // 如果已存在相同猫咪编号 this.$message({ message: "已有相同猫咪编号,请重新添加!!", type: "warning", }); } }) .catch((err) => { console.log("检查猫咪编号失败" + err); }) } }, updateOne(one) { console.log(one); axios .get("http://127.0.0.1/cat/get", { params: { catIdInput: one, }, }) .then((res) => { console.log(res.data); this.info_update = res.data; this.dialogVisible_update = true; // 显示修改对话框 this.catIdInput_update = res.data[0].猫咪编号; this.catTypeInput_update = res.data[0].猫咪类别; this.catNameInput_update = res.data[0].猫咪名字; this.breedInput_update = res.data[0].品种; this.colorInput_update = res.data[0].毛色; this.birthDateInput_update = res.data[0].出生日期.substring(0, 10); this.genderInput_update = res.data[0].性别; this.priceInput_update = res.data[0].价格; this.stockInput_update = res.data[0].库存数量; this.discountInput_update = res.data[0].折扣; this.pictInput_update = res.data[0].pic; }) .catch((err) => { console.log("操作失败" + err) }); }, update(one) { // 修改操作 console.log(one); // 完整性检查 if ( (this.catIdInput_update.length == 0) || (this.catTypeInput_update.length == 0) || (this.catNameInput_update.length == 0) || (this.breedInput_update.length == 0) || (this.colorInput_update.length == 0) || (this.birthDateInput_update.length == 0) || (this.genderInput_update.length == 0) || (this.priceInput_update.length == 0) || (this.stockInput_update.length == 0) || (this.discountInput_update.length == 0) ) { this.$message({ type: "warning", message: "猫咪信息不可为空,请重新填写!", }); return false; } // 正确性检查 else if ((this.catIdInput_update.length < 3) || (this.catIdInput_update.length > 10)) { this.$message({ type: "warning", message: "猫咪编号长度需要在3~10个字符之间,请重新输入!", }); return false; } else if ((this.catNameInput_update.length < 1) || (this.catNameInput_update.length > 10)) { this.$message({ type: "warning", message: "猫咪名字长度需要在1~10个字符之间,请重新输入!", }); return false; } else if (isNaN(this.priceInput_update) || this.priceInput_update <= 0) { this.$message({ type: "warning", message: "价格必须是正数,请重新输入!", }); return false; } else if (isNaN(this.stockInput_update) || this.stockInput_update < 0) { this.$message({ type: "warning", message: "库存数量必须是非负整数,请重新输入!", }); return false; } else if (isNaN(this.discountInput_update) || this.discountInput_update < 0 || this.discountInput_update > 1) { this.$message({ type: "warning", message: "折扣必须是0-1之间的小数,请重新输入!", }); return false; } // 后端传参、执行方法 else { axios .get("http://127.0.0.1/cat/update", { params: { catIdInput: this.catIdInput_update, catTypeInput: this.catTypeInput_update, catNameInput: this.catNameInput_update, breedInput: this.breedInput_update, colorInput: this.colorInput_update, birthDateInput: this.birthDateInput_update, genderInput: this.genderInput_update, priceInput: this.priceInput_update, stockInput: this.stockInput_update, discountInput: this.discountInput_update, pictInput: this.pictInput_update }, }) .then((res) => { console.log(res.data); if (res.data.status == 200) { this.dialogVisible_update = false; // 关闭修改对话框 this.$message({ type: "warning", message: "猫咪信息已修改成功!", }); this.all(); // 重新获取修改后的完整数据 } else { this.$message({ message: "修改失败!", type: "error", }); } }) .catch((err) => { console.log("操作失败" + err); }); } }, //删除操作,进行删除确认提示,可以像添加,删除一样,显示信息后“确定”后再删除,只使用一个delOne(one)方法删除即可 delOne(one) { console.log(one); // 加入删除确认! this.$confirm( "此操作将永久删除猫咪编号为【" + one + "】的记录!", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", } ) .then(() => { axios .get("http://127.0.0.1/cat/del", { params: { catIdInput: one, }, }) .then((res) => { console.log(res.data); if (res.data.status == 200) { this.all(); // 重新获取删除后的完整数据 this.$message({ type: "success", message: "已删除猫咪编号为【" + one + "】的记录!", }); } else { this.$message({ type: "error", message: "删除失败!", }); } }) .catch((err) => { console.log("操作失败" + err); this.$message({ type: "error", message: "删除操作失败!", }); }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除", }); }); }, // 在添加和修改对话框中,显示图片 show() { var file = document.getElementById("f").files[0]; // 获取上传的文件 this.pictInput_add = file.name; // 用于增加图片 this.pictInput_update = file.name; // 用于修改图片 var fileReader = new FileReader(); fileReader.readAsDataURL(file); // 读取文件内容 fileReader.onload = function () { document.getElementById("img").src = fileReader.result; // 显示图片预览 }; } } } </script> <style> .box { text-align: center; width: 100%; position: relative; margin: 50px auto; top: 0; left: 0; right: 0; bottom: 0; } .pagination-container { margin-top: 20px; display: flex; justify-content: center; } .el-table { margin-top: 20px; /* 这里设置间距为 20px,你可以根据实际需求调整这个数值,比如改为 30px 等 */ } </style>这是我的源代码,照片上传不显示
06-10
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值