IB Sheet 8 Examples

페이징

HTML

<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/vendors/jquery.min.js"></script>
<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/compatible/light/main.css"/>

<!--  ibsheet 필수 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>

<script src="https://www.ibsheet.com/v7/libs/pagination/jquery.twbsPagination.min.js"></script>

<div class='ibsheet-wrap' id='descFunc'><div><input type='checkbox' id='chk1' onclick='ib.sampleBtn(this)'> <label class='mgr10'>페이지네비게이션 표시</label><hr><input type='checkbox' id='chk2' onclick='ib.sampleBtn(this)'> <label class='mgr10'>JQuery 네비게이션 표시</label><hr><button class='mgr10' onclick='ib.sampleBtn(this, 1)'>클라이언트페이징</button><hr><button class='mgr10' onclick='ib.sampleBtn(this, 4)'>서버페이징</button><hr><button class='mgr10' onclick='ib.sampleBtn(this, 3)'>서버스크롤페이징</button></div></div>


<div style='height:calc(100% - 128px)'><div id='sheetDiv' style='width:100%;height:90%'></div><input...

CSS

.pagination { display: inline-block; padding-left: 0; margin: 20px 0; border-radius: 4px;}.pagination>li { display: inline-block;}.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { z-index: 2; color: #23527c; background-color: #eee; border-color: #ddd;}.pagination-sm>li>a, .pagination-sm>li>span { padding: 5px 10px; font-size: 12px; line-height: 1.5;}.pagination>li>a, .pagination>li>span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none;background-color: #fff; border: 1px solid #ddd;} .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { z-index: 3; color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7;}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "Def": {
    "Col": {
      "Width": "120"
    }
  },
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 1,
    "PageLength": 50,
    "Alternate": 2,
    "InfoRowConfig": ""
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header": "No","Name": "SEQ","Width": "90"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "확인","Type": "Bool","Name": "sCheck","Width": "60"},
    {"Header": "회사","Type": "Text","Name": "sCompany","Width": "150"},
    {"Header": "판매 국가","Type": "Text","Name": "sCountry"},
    {"Header": "판매 수량","Type": "Int","Name": "sSaleQuantity"},
    {"Header": "판매 증가량","Type": "Int","Name": "sSaleIncrease"},
    {"Header": "가격","Type": "Int","Name": "sPrice","Format": "#,### \\원","Width": "180"},
    {"Header": "만족도","Type": "Int","Name": "sSatisfaction","Format": "# \\%"},
    {"Header": "코멘트","Type": "Text","Name": "sComment","Width": "300","RelWidth": 1}
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish:function (evtParam) {
      console.log(evtParam.eventName + ' 발생');
      var URL = '/samples/customer/paging.jsp';
      var param = {};

      if (location.href.indexOf('localhost') > -1) {
        URL = '../jsp' + URL;
      } else {
        URL = 'https://api.ibleaders.com/ibsheet/v8' + URL;
      }

      // 시트 최초 생성시 발생 이벤트
      if (evtParam.sheet.SearchMode > 1) { // 서버모듈 조회
        param = {
          url: URL,
          param: 'data=100&total=15000&searchMode=' + evtParam.sheet.SearchMode,
          method: 'POST',
          callback: function (rtn) {
            var rtnData = JSON.parse(rtn.data);

            evtParam.sheet.showMessageTime('<span style=\'color:black\'>조회가 완료되었습니다.<br> 서버모듈 전체 데이터 건수 : ' + rtnData.Total + '</span>', 1000);
          }
        };

        evtParam.sheet.doSearchPaging(param);
      } else { // 클라이언트 조회
        param = {
          url: URL,
          method: 'POST',
          callback: function (rtn) {
            var rtnData = JSON.parse(rtn.data);

           ...