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

easyUI如何實現(xiàn)后臺分頁與前臺顯示功能

小編這次要給大家分享的是easyUI如何實現(xiàn)后臺分頁與前臺顯示功能，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

突泉ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

本文實例講述了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能。分享給大家供大家參考，具體如下：

之前我寫過一篇文章，實現(xiàn) easyui 前臺分頁，當時使用了分頁過濾器，鏈接如下：

https://www.jb51.net/article/187747.htm

后來考慮到如果后臺數(shù)據(jù)量龐大，那么用前臺分頁是不現(xiàn)實的，會很耗時間，占用系統(tǒng)開銷。這個時候就應該用到后臺分頁了。后臺分頁其實也很簡單：每次只 sql 語句只查詢前臺某一頁需要的數(shù)據(jù)。所以需要前臺給后臺傳兩個數(shù)據(jù)：

  • pageNumber：當前頁數(shù)
  • pageSize：當前頁的數(shù)據(jù)條數(shù)。

一、首先在pom.xml中引入分頁插件：

<!--分頁-->
<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>4.1.6</version>
</dependency>
<dependency>
  <groupId>com.github.jsqlparser</groupId>
  <artifactId>jsqlparser</artifactId>
  <version>0.9.6</version>
</dependency>

這里之前遇到了一個坑，當時引入了一個不兼容的分頁插件版本，然后就一直報錯，后來換成這個就好使了。。

二、前臺 js 代碼（easyUI）

//表格鋪值
$('#dg_question_list').datagrid({
    url: baselocation + '/test/question/allQuestions', //controller地址
    method: 'post',
    //攜帶參數(shù)
    queryParams: {
      pageNum: incubGloPageNumber, // 全局變量，設置初始值為1
      pageSize: incubGloPageSize // 全局變量，設置初始值為10
    },
    height: 370,
    border: true,
    fitColumns: false, // 適應網(wǎng)格的寬度，防止水平滾動
    rownumbers: true, // 顯示一個行號列
    nowrap: true, // 數(shù)據(jù)顯示在一行
    singleSelect: true, // 只允許選擇一行
    pagination: true, // 在數(shù)據(jù)表格控件底部顯示分頁工具欄
    columns: [[{
      field: 'ck',
      checkbox: true,
    }, {
      title: '試題內容', //顯示的列名
      field: 'question_content', //和對象中的名字保持一致
      width: 150 // 寬度 必填！！！
    }, {
      title: '試題類型', //顯示的列名
      field: 'question_type_value', //和對象中的名字保持一致
      width: 100 // 寬度 必填！！！
    }, {
      title: '試題答案', //顯示的列名
      field: 'question_answer', //和對象中的名字保持一致
      width: 100, // 寬度 必填！！！
      sortable: true
    }, {
      title: '試題分值', //顯示的列名
      field: 'question_points', //和對象中的名字保持一致
      width: 100, // 寬度 必填！！！
      sortable: true
    }, {
      title: '所屬知識點', //顯示的列名
      field: 'kp_value', //和對象中的名字保持一致
      width: 150, // 寬度 必填！！！
      sortable: true
    }, {
      title: '創(chuàng)建時間', //顯示的列名
      field: 'question_create_time', //和對象中的名字保持一致
      width: 150, // 寬度 必填！！！
      sortable: true
    }, {
      title: '最后修改時間', //顯示的列名
      field: 'question_modify_time', //和對象中的名字保持一致
      width: 150, // 寬度 必填！！！
      sortable: true
    }
    ]],
    loadFilter: function (result) {
      if (result.code == 200) {
        return result.data;
      } else {
        myMsgAlert('錯誤', '試卷列表加載失敗！', 'error');
      }
    },
    onClickRow: function (index, row) {
      globalQuestionId = row.id;
      $('#paperInfo_panel').panel('setTitle', '試題信息');
      setOption(row);
    }
});
 
//加載分頁
$('#dg_question_list').datagrid('getPager').pagination({
    pageSize: 10,
    pageList: [10, 20, 30, 40, 50],
    beforePageText: '第',//頁數(shù)文本框前顯示的漢字
    afterPageText: '頁  共 {pages} 頁',
    displayMsg: '當前顯示 {from} - {to} 條記錄  共 {total} 條記錄',
    /**
     * 分頁查詢
     * @param pageNumber
     * @param pageSize
     */
    onSelectPage: function (pageNumber, pageSize) {
      incubGloPageNumber = pageNumber;
      incubGloPageSize = pageSize;
      incubQueryInfo(pageNumber, pageSize);
 
    }
});
/**
 * 獲取分頁信息
 * @param pageNumber
 * @param pageSize
 */
function incubQueryInfo(pageNumber, pageSize) {
  var handler = baselocation + '/test/question/allQuestions'
  var opts = $('#dg_question_list').datagrid('options');
  var queryParams = opts.queryParams;
  queryParams.pageNum = pageNumber;
  queryParams.pageSize = pageSize;
  //設置表格數(shù)據(jù)的來源URL
  $('#dg_question_list').datagrid('options').url = handler;
  //重新加載表格
  $('#dg_question_list').datagrid('reload');
 
  //行號累增
  var start = (pageNumber - 1) * pageSize;
  var end = start + pageSize;
  var rowNumbers = $('.datagrid-cell-rownumber');
  $(rowNumbers).each(function (index) {
    var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);
    $(rowNumbers[index]).html("");
    $(rowNumbers[index]).html(row);
  });
 
}

三、后臺service層代碼：

@Override
public Map<String, Object> selectAllQuestions(Map<String, Object> allQuestionsMap){
    //獲取頁數(shù)
    int pageNum = Integer.parseInt(allQuestionsMap.get("pageNum").toString());
    //獲取條數(shù)
    int pageSize = Integer.parseInt(allQuestionsMap.get("pageSize").toString());
    //判斷規(guī)格
    pageNum = pageNum == 0 &#63; 1 : pageNum;
    pageSize = pageSize == 0 &#63; 10 : pageSize;
    //分頁插件，要在調用mapper前就創(chuàng)建
    PageHelper.startPage(pageNum, pageSize);
 
    List<Map> questionList = testQuestionsMapper.selectAllQuestions(allQuestionsMap);
 
    PageInfo pageInfo = new PageInfo(questionList);
 
    Map<String, Object> resultMap = new HashMap<>();
    resultMap.put("total", pageInfo.getTotal());//easyui框架需要這個total數(shù)據(jù)來計算一共有多少頁
    resultMap.put("rows", pageInfo.getList());//rows里面放的是一頁中的所有數(shù)據(jù)
    return resultMap;
 
}

注意：這里easyui如果用queryParams給后臺傳遞參數(shù)的話，controller層接收數(shù)據(jù)的時候應該一個一個接收：

//根據(jù)條件搜索試題
@RequestMapping(value = "/allQuestions", method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> selectAllQuestions(
                     @RequestParam(value = "pageNum") int pageNumber,
                     @RequestParam(value = "pageSize") int pageSize
)

然后再把它們一個一個放到map里面，傳給service層

Map<String,Object> allQuestionsMap = new HashMap<>();
    allQuestionsMap.put("pageNum",pageNumber);
    allQuestionsMap.put("pageSize",pageSize);

sql語句不用變動。

看完這篇關于easyUI如何實現(xiàn)后臺分頁與前臺顯示功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。

新聞標題：easyUI如何實現(xiàn)后臺分頁與前臺顯示功能
本文鏈接：http://chinadenli.net/article6/pgpsog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站策劃、手機網(wǎng)站建設、響應式網(wǎng)站、自適應網(wǎng)站、移動網(wǎng)站建設

廣告

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

營銷型網(wǎng)站建設