부트스트랩 테이블 테이블 플러그인(2) 프런트엔드 및 프런트엔드 페이징 퍼지 쿼리에 대한 심층적인 이해-JS 튜토리얼-php.cn

부트스트랩 테이블 테이블 플러그인(2) 프런트엔드 및 프런트엔드 페이징 퍼지 쿼리에 대한 심층적인 이해

零下一度

풀어 주다： 2017-05-19 09:23:52

원래의

4823명이 탐색했습니다.

이 글은 주로 부트스트랩 테이블 연구 노트, 특정 참조 값이 있는 프론트엔드 및 백엔드 페이징 퍼지 쿼리를 공유합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

사용 과정에서 읽어보세요. 문서를 작성하면서 몇 가지 어려움을 겪었습니다. 여기에 기록하고 요약하겠습니다.

1. 프론트엔드 페이징
2. 퍼지 쿼리

프론트엔드 페이징은 상당히 간단하게 테스트 데이터 20,000개를 추가했더니 렉 없이 원활하게 열렸습니다.

$(function(){
  a();

});
  function a () {
    $(&#39;#yourtable&#39;).bootstrapTable({
      url: "/user/getUserList/",
      method:"post",
      dataType: "json",
      striped:true,//隔行变色
      cache:false,  //是否使用缓存
      showColumns:false,// 列
      pagination: true, //分页
      sortable: false, //是否启用排序
      singleSelect: false,
      search:false, //显示搜索框
      buttonsAlign: "right", //按钮对齐方式
      showRefresh:false,//是否显示刷新按钮
      sidePagination: "client", //客户端处理分页　服务端：server
      pageNumber:"1",　　//启用插件时默认页数
      pageSize:"15",　　//启用插件是默认每页的数据条数
      pageList:[10, 25, 50, 100],　　//自定义每页的数量
      undefinedText:&#39;--&#39;,　
      uniqueId: "id", //每一行的唯一标识，一般为主键列
      queryParamsType:&#39;&#39;,
      columns: [
        {
          title: &#39;ID&#39;,
          field: &#39;id&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;,
        },
        {
          title: &#39;用户姓名&#39;,
          field: &#39;name&#39;,
          align: &#39;center&#39;,
          valign: &#39;middle&#39;,
        },
        {
          title: &#39;性别&#39;,
          field: &#39;sex&#39;,
          align: &#39;center&#39;,
        },
        {
          title: &#39;用户账号&#39;,
          field: &#39;username&#39;,
          align: &#39;center&#39;,
        },
        {
          title: &#39;手机号&#39;,
          field: &#39;phone&#39;,
          align: &#39;center&#39;,
        },
        {
          title: &#39;邮箱&#39;,
          field: &#39;email&#39;,
          align: &#39;center&#39;,
        },
        {
          title: &#39;权限&#39;,
          field: &#39;rolename&#39;,
          align: &#39;center&#39;,
        },
        {
          title: &#39;操作&#39;,
          field: &#39;id&#39;,
          align: &#39;center&#39;,
          formatter:function(value,row,index){
　　　　　　　　　　　　　　//value 能够获得当前列的值
　　　　　　　　　　　　　　//====================================

            var e = &#39;<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\&#39;&#39;+ row.id + &#39;\&#39;)">编辑</button> &#39;;
            var d = &#39;<button href="#" class="btn btn-default" mce_href="#" onclick="del(\&#39;&#39;+ row.id +&#39;\&#39;)">删除</button> &#39;;
            return e+d;
          }
        }
      ]
    });

  }

로그인 후 복사

앞으로 데이터가 점점 더 많아질 것이라는 점을 고려하면, 데이터 양이 많을 경우 당연히 프론트엔드 페이징이 요구 사항을 충족할 수 없으므로 백엔드 페이징을 수행해야 합니다

우선:

sidePagination: "server",//Server paging

queryParams: queryParams,//매개변수 전달(*)

//得到查询的参数
    function queryParams (params) {
      var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        pageSize: params.pageSize,  //页面大小
        pageNumber: params.pageNumber, //页码
        username: $("#search_username").val(),
        name:$("#search_name").val(),
        sex:$("#search_sex").val(),
        phone:$("#search_mobile").val(),
        email:$("#search_email").val(),
      };
      return temp;
    };

로그인 후 복사

표시되는 항목 수 각 페이지의 현재 페이지 번호가 여기에 전달됩니다. 쿼리해야 하는 경우 쿼리할 조건을 전달해야 합니다.

구체적인 js는 다음과 같습니다:

$(function(){
  a();

});
  function a () {
    $('#userListTable').bootstrapTable({
      url: "/user/getUserList/",
      method:"post",
      dataType: "json",
      contentType: "application/x-www-form-urlencoded",
      striped:true,//隔行变色
      cache:false,  //是否使用缓存
      showColumns:false,// 列
      toobar:'#toolbar',
      pagination: true, //分页
      sortable: false,           //是否启用排序
      singleSelect: false,
      search:false, //显示搜索框
      buttonsAlign: "right", //按钮对齐方式
      showRefresh:false,//是否显示刷新按钮
      sidePagination: "server", //服务端处理分页
      pageNumber:"1",
      pageSize:"15",
      pageList:[10, 25, 50, 100],
      undefinedText:'--',
      uniqueId: "id", //每一行的唯一标识，一般为主键列
      queryParamsType:'',
      queryParams: queryParams,//传递参数（*）
      columns: [
        {
          title: 'ID',
          field: 'id',
          align: 'center',
          valign: 'middle',
        },
        {
          title: '用户姓名',
          field: 'name',
          align: 'center',
          valign: 'middle',
        },
        {
          title: '性别',
          field: 'sex',
          align: 'center',
        },
        {
          title: '用户账号',
          field: 'username',
          align: 'center',
        },
        {
          title: '手机号',
          field: 'phone',
          align: 'center',
        },
        {
          title: '邮箱',
          field: 'email',
          align: 'center',
        },
        {
          title: '权限',
          field: 'rolename',
          align: 'center',
        },
        {
          title: '操作',
          field: 'id',
          align: 'center',
          formatter:function(value,row,index){
            var e = ' ';
            var d = ' ';
            return e+d;
          }
        }
      ]
    });

    //得到查询的参数
    function queryParams (params) {
      var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
        pageSize: params.pageSize,  //页面大小
        pageNumber: params.pageNumber, //页码
        username: $("#search_username").val(),
        name:$("#search_name").val(),
        sex:$("#search_sex").val(),
        phone:$("#search_mobile").val(),
        email:$("#search_email").val(),
      };
      return temp;
    };
  }

//搜索
function serachUser() {
  $("#userListTable").bootstrapTable('refresh');
}

로그인 후 복사

* 주목할 만한 사항:

contentType: "application/x-www -form- urlencoded", //부트스트랩 테이블은 데이터를 얻기 위해 ajax를 사용하기 때문에 요청의 콘텐츠 유형은 기본적으로 text/plain으로 설정되므로 서버 측에서 @RequestParam 매개 변수 매핑을 통해 직접 얻을 수 없습니다.
및:

HTML:

<p id="page-content" class="animated fadeInRight">
  <p class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;">
    <form  id="search_User">
      <p class="panel-body search_box">
        <p class="search_p">
          <label for="search_name">用户姓名：</label>
          <input type="text" class="form-control" id="search_name" name="UserV2.name" >
        </p>
        <p class="search_p">
          <label for="search_mobile">手机号：</label>
          <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >
        </p>
        <p class="search_p">
          <label for="search_sex">性别：</label>
          <select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---请选择---</option><option value="男">男</option><option value="女">女</option></select>
        </p>
      </p>
      <p class="panel-body search_box">
        <p class="search_p">
          <label for="search_name">用户账号：</label>
          <input type="text" class="form-control" id="search_username" name="UserV2.username" >
        </p>
        <p class="search_p">
          <label for="search_name">用户Email：</label>
          <input type="text" class="form-control" id="search_email" name="UserV2.email" >
        </p>
        <p class="search_p" style="text-align: center;">
          <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
        </p>
      </p>
    </form>
  </p>
  <table id="userListTable" ></table>
</p>

로그인 후 복사

양식을 초기화하는 중인지 검색할 때인지는 다음과 같습니다. 백그라운드로 전달된 데이터는 다음과 같습니다.

pageSize=15 pageNumber=1 username= name= sex=phone= email=

반환 데이터:

두 개의 값을 반환하려고 합니다:

rows total

rows:쿼리한 데이터

total:총 데이터(이 총계는 단일 페이지 수가 아닌 전체 데이터의 총 개수를 나타냅니다. 예를 들어 사용자 테이블에 100개의 데이터가 있고 한도는 0,15이므로 내 행에는 15개의 데이터가 있지만 총계는 100입니다.

{
  "total": 2,
  "rows": [
    {
      "email": "39385908@qq.com",
      "id": 1,
      "name": "邓某某",
      "password": "",
      "phone": "12345678911",
      "rolename": "平台管理员",
      "sex": "男",
      "username": "admin"
    },
    {
      "email": "2222@222.com",
      "id": 8,
      "name": "王小二1",
      "password": "",
      "phone": "13245678910",
      "rolename": "",
      "sex": "男",
      "username": "admin2"
    }
  ]
}

로그인 후 복사

총 개수에 이전 pageSize 및 행을 추가하면 bootStraptable이 자동으로 페이징과 관련된 요소를 생성합니다. :

렌더링 :