layui框架如何實現(xiàn)分頁設(shè)置-創(chuàng)新互聯(lián)

小編給大家分享一下layui框架如何實現(xiàn)分頁設(shè)置，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),萬年企業(yè)網(wǎng)站建設(shè),萬年品牌網(wǎng)站建設(shè),網(wǎng)站定制,萬年網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,萬年網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

具體步驟如下：

1、從官方文檔 - 內(nèi)置模塊 - 數(shù)據(jù)表格中復(fù)制如下：

2、復(fù)制到頁面、將CSS地址以及JS地址改為自己本地的地址

3、瀏覽器運行、會出現(xiàn)如下

4、發(fā)現(xiàn)提示數(shù)據(jù)接口請求異常：error。

解決：

1.1將代碼中的url請求地址修改為自己的地址

1.2將cols參數(shù)修改成自己接口地址返回的參數(shù)

5、然后到瀏覽器繼續(xù)范圍、依舊報錯、錯誤如下：

6、針對問題去看、是接口返回的數(shù)據(jù)格式不正確的

然后我們?nèi)ナ謨钥唇涌跀?shù)據(jù)返回格式。

具體：官方文檔 - 內(nèi)置模塊 - 數(shù)據(jù)表格 – 返回的數(shù)據(jù)

7、具體返回的數(shù)據(jù)格式如下、其中、成功的時候返回的code應(yīng)該為0

{    "code": 0,    "msg": "",    "count": 1000,    "data": [ {},{},{} ]}

8、改完自己的接口返回格式后、再次去瀏覽器訪問、會出現(xiàn)如下效果就表示接口格式以及返回的數(shù)據(jù)是正確的

9、在這塊、看到的結(jié)果中、出現(xiàn)分頁的效果、那代碼是那塊影響的呢？會發(fā)現(xiàn)在js代碼中有一段代碼：page:true // 開啟分頁。但是依舊存在問題、展示的分頁數(shù)據(jù)不正確。解決：將如下代碼復(fù)制出來、寫在自己代碼中、將接口返回的數(shù)據(jù)賦值給對應(yīng)的參數(shù)。具體操作如下：

操作：示例 – 組件示例 – 數(shù)據(jù)表格 – 解析任意數(shù)據(jù)格式 – 查看代碼 - parseData

10、然后再次運行、會發(fā)現(xiàn)我們自己寫的限制條數(shù)并沒有起作用、然后再次看請求地址、會發(fā)現(xiàn)是通過get請求、固定參數(shù) page、limit來操作的、同時給了默認(rèn)的值；

page：1,limit：10,

11、那如何改為post請求呢？只需要指定請求方式post

操作：官方文檔 - 內(nèi)置模塊 - 數(shù)據(jù)表格 – 異步數(shù)據(jù)接口 – method

12、運行、查看請求、如下：

13、請求參數(shù)的名稱名稱已經(jīng)知道是page、limit 如何修改為我們自己想要的參數(shù)名呢？

操作：官方文檔 - 內(nèi)置模塊 - 數(shù)據(jù)表格 – 異步數(shù)據(jù)接口 – request代碼：

request: {    pageName: 'page',   // 頁碼的參數(shù)名稱，默認(rèn)：page    limitName: 'size'   // 每頁數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit}

14、運行、查看請求參數(shù)、具體如下：

15、改變默認(rèn)的每頁顯示條數(shù)

如何將首頁默認(rèn)顯示條數(shù)改為自己想要的？如何將瀏覽器默認(rèn)顯示的每頁顯示的條數(shù)改為自己想要的？操作：官方文檔 – 內(nèi)置模塊 – 數(shù)據(jù)表格 – 基礎(chǔ)參數(shù)一覽表 – limit、limits代碼修改：

limit：3，limits：[2,3,5],

16、運行、查看請求參數(shù)、具體如下：

17、最終的html代碼如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>table模塊快速使用</title>    <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body>    <table id="demo" lay-filter="test"></table>    <script src="./layui/layui.js"></script>    <script>        layui.use('table', function () {            var table = layui.table;            //第一個實例            table.render({                elem: '#demo'                , url: 'http://localhost/php/public/index.php/index/index/index' //數(shù)據(jù)接口                , method: 'post'                , page: true //開啟分頁                , limit: 3                , limits: [2, 3, 5]                , cols: [[                    { width: 80, type: 'checkbox' },                    { field: 'type_id', width: 80, title: 'ID', sort: true },                    { field: 'type_name', title: '分類名稱', sort: true }                ]],                parseData: function (res) { //將原始數(shù)據(jù)解析成 table 組件所規(guī)定的數(shù)據(jù)                    return {                        "code": res.code, //解析接口狀態(tài)                        "msg": res.msg, //解析提示文本                        "count": res.data.total, //解析數(shù)據(jù)長度                        "data": res.data.data //解析數(shù)據(jù)列表                    };                },                request: {                    pageName: 'page' // 頁碼的參數(shù)名稱，默認(rèn)：page                    , limitName: 'size' //每頁數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit                },            });        });    </script></body></html>

18、接口使用的TP5.0 沒有使用模型層、具體簡單代碼如下：

<?phpnamespace app\index\controller;use think\Controller;use think\Db;use think\Request;class Index extends Controller{    public function index()    {        $size = Request::instance()->post( 'size', 3 );        $page = Request::instance()->post( 'page', 1 );        $res = Db::table( 'goods_type' )->paginate( $size, false, [ 'page'=> $page] );        $arr['code'] = 0;        $arr['msg'] = 'ok';        $arr['data'] = $res;        return json( $arr );    }}?>

以上是“l(fā)ayui框架如何實現(xiàn)分頁設(shè)置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁標(biāo)題：layui框架如何實現(xiàn)分頁設(shè)置-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://chinadenli.net/article14/dcjjde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、軟件開發(fā)、網(wǎng)站策劃、域名注冊、微信公眾號、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

layui框架如何實現(xiàn)分頁設(shè)置-創(chuàng)新互聯(lián)