layui數(shù)據(jù)表格中如何實(shí)現(xiàn)點(diǎn)擊分頁按鈕和監(jiān)聽事件

這篇文章給大家分享的是有關(guān)layui數(shù)據(jù)表格中如何實(shí)現(xiàn)點(diǎn)擊分頁按鈕和監(jiān)聽事件的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

先上圖

代碼

.html

<div>
  <table class="layui-hide" id="test" lay-filter="demo"></table>
  <div id="page"></div>
</div>

.js

//頁面第一次請求 默認(rèn) 1頁 10條
function dataLists(pageNum, numPerPage) {
    $.post(Url + 'pipei_dj/pagelist', {
      pageNum: pageNum, // 頁碼數(shù)
      numPerPage: numPerPage // 每頁條數(shù)
    }, function (data) {
      let datalist = JSON.parse(data)
      dataList(datalist) // 數(shù)據(jù)傳到 table組件
      page(datalist)   // 數(shù)據(jù)傳到 分頁組件
    })
  }
  dataLists(1, 10)

function page(data) {
    laypage.render({
      elem: 'page', //注意，這里的 page 是 ID，不用加 # 號
      count: data.totalCount, //數(shù)據(jù)總數(shù)，從服務(wù)端得到
      limit: data.numPerPage, // 每頁條數(shù)
      limits: [10, 20, 30, 40, 50],
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
      jump: function (obj, first) {
        //console.log(obj)
        //obj包含了當(dāng)前分頁的所有參數(shù)，比如：
        //console.log(obj.curr); //得到當(dāng)前頁，以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。
        //console.log(obj.limit); //得到每頁顯示的條數(shù)

        //首次不執(zhí)行
        if (!first) {
          //do something
          numpage(obj.curr, obj.limit) // 分頁點(diǎn)擊傳參 
        }
      }
    });
  }
	// 從新寫了 一個請求
  function numpage(pageNum, numPerPage) {
    $.post(Url + 'pipei_dj/pagelist', {
      pageNum: pageNum,
      numPerPage: numPerPage
    }, function (data) {
      let datalist = JSON.parse(data)
      dataList(datalist) // 傳到table組件
    })
  }

  // 表格渲染
  function dataList(data) {
    table.render({
      elem: '#test',
      cols: [
        [{
          title: '序號',
          type: "numbers"
        }, {
          field: 'id',
          title: 'id',
          hide: true
        }, {
          field: 'status',
          title: '狀態(tài)',
          hide: true
        }, {
          field: 'danjia',
          title: '單價(￥)'
        }, {
          field: 'createtime',
          title: '創(chuàng)建時間'
        }, {
          field: 'status',
          title: '狀態(tài)',
          toolbar: '#barstate'
        }, {
          title: '操作',
          toolbar: '#barDemo'
        }]
      ],
      data: data.dataList, // 數(shù)據(jù)
      limit: data.numPerPage, // 顯示的條數(shù)
      //page: true, // 開啟分頁
    });
  }

感謝各位的閱讀！關(guān)于“l(fā)ayui數(shù)據(jù)表格中如何實(shí)現(xiàn)點(diǎn)擊分頁按鈕和監(jiān)聽事件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！