java局部刷新表格数据,局部刷新如何实现?看我简单实现局部刷新、分页
在這里小小推薦下我的個(gè)人博客
前言
1.感謝大家的關(guān)注和閱讀,堅(jiān)持干貨不斷~~~
2.今天我們來(lái)說(shuō)一下如何通過(guò)ajax實(shí)現(xiàn)局部刷新。
應(yīng)用場(chǎng)景
在Java中,如果我們一個(gè)頁(yè)面中有很多的信息都是從后臺(tái)傳遞過(guò)來(lái)的,但是我們有的地方需有有變動(dòng)。比如我們?cè)谧霾似饭芾?#xff0c;上下翻頁(yè)時(shí),我們的分類以及其他的信息一般是不需要刷新,只需要更新我們的菜品信息即可,如果跳轉(zhuǎn)后臺(tái)會(huì)浪費(fèi)很長(zhǎng)時(shí)間,如果我們使用ajax實(shí)現(xiàn)異步刷新。就可以在html中通過(guò)js對(duì)頁(yè)面進(jìn)行簡(jiǎn)單的控制實(shí)現(xiàn)局部刷新的效果。我們今天就以分頁(yè)查詢?yōu)槔M(jìn)行講解!!!
代碼實(shí)現(xiàn)
1.后臺(tái)的Java代碼我就不再貼出來(lái)了,大家可以查看我的上一篇文章,Mybatis-Plus來(lái)學(xué)習(xí)一下!代碼生成、分頁(yè)插件?,可以通過(guò)mybatis-plus進(jìn)行分頁(yè)或者是使用mybatis的分頁(yè)插件也可以,無(wú)論如何使用什么技術(shù),相信實(shí)現(xiàn)分頁(yè)對(duì)大家來(lái)說(shuō)不是什么難事!!!
2.那我們直接來(lái)說(shuō)一下視圖層html的代碼,我們簡(jiǎn)單的以飯店的商品管理為例:
菜品列表
編號(hào)分類名稱菜品單價(jià)(分)折后價(jià)(分)操作
首頁(yè)
上一頁(yè)
下一頁(yè)
尾頁(yè)
可見(jiàn)當(dāng)我們點(diǎn)擊上下頁(yè)、首尾頁(yè)時(shí),只需要對(duì)id=“main”的tbody標(biāo)簽中的tr進(jìn)行更新即可。
3.接下來(lái)我們說(shuō)一下javascript代碼,我們需要實(shí)現(xiàn)的功能主要就是依靠他來(lái)實(shí)現(xiàn)。
// 首先定義當(dāng)前頁(yè)page為1,總頁(yè)數(shù)allPage為1
var page = 1;
var allPage = 1;
//商品表格顯示
function goodstable(p) {
// 判斷傳入頁(yè)數(shù)大于等于1且小于等于總頁(yè)數(shù)
if (p >= 1 && p <= allPage) {
// 將傳入頁(yè)賦值給當(dāng)前頁(yè)
page = p;
$.ajax({
type: "post", // 以post方式提交
url: "/goods/toList?page=" + p, // 請(qǐng)求鏈接并傳遞參數(shù)page
dataType: "json", // 返回json數(shù)據(jù)
error() {
},
success(data) {
$("#main tr").remove(); // 刪除ID=“main”標(biāo)簽的字標(biāo)簽tr下所有內(nèi)容
allPage = Math.ceil(data.total / data.size); // 給總頁(yè)數(shù)賦值向上取整=總條目/每頁(yè)大小
document.getElementById("span").innerHTML = page + "/" + allPage;
// 以下代碼為循環(huán)布局
for (var i = 0; i < data.rows.length; i++) {
var trtd = "
" // 添加復(fù)選框+ data.rows[i].goodsId + "
" // 添加標(biāo)號(hào)+ data.rows[i].typeName + "
" // 類型名+ data.rows[i].goodsName + "
" // 商品名+ data.rows[i].goodsPrice + "
" // 商品價(jià)格+ data.rows[i].goodsDiscount + "
"; // 商品折后價(jià)// 將以上標(biāo)簽動(dòng)態(tài)添加到tbody中進(jìn)行展示
$("#table1 tbody").append("
" + trtd + "");}
}
});
}
}
相信大家已經(jīng)看懂了,我的基本實(shí)現(xiàn)思路就是先將之前的數(shù)據(jù)從頁(yè)面中刪除,然后通過(guò)ajax向后臺(tái)請(qǐng)求數(shù)據(jù),然后將數(shù)據(jù)再動(dòng)態(tài)的展示到頁(yè)面上,就可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)刷新,然后以此可以實(shí)現(xiàn)很多功能。如上面的分頁(yè)查詢嗎、信息更新等。
結(jié)束語(yǔ)
1.我的方式可能并不是最好的方式,但是倒也不失為一種方法。經(jīng)過(guò)我的實(shí)驗(yàn),還是蠻好用的。
2.感謝的大家的關(guān)注和閱讀,希望大家可以給我提出更多的問(wèn)題以及想法,為我提供素材和題目。
3.我會(huì)努力,保持更新。
4.干貨不斷,感謝!!!!
總結(jié)
以上是生活随笔為你收集整理的java局部刷新表格数据,局部刷新如何实现?看我简单实现局部刷新、分页的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Android kotlin 将Base
- 下一篇: 02.规划过程组表格-责任分配矩阵