JFinal+bootstrap开发，使用datatables的分页

主要写一下datatables分页功能的使用，以及ajax的发送请求，后台逻辑的处理

1、在html页面引入datatables的一些js文件

2、html代码部分

3、js部分

<script type="text/javascript">
  $(function () {
      table = $('#table_id').DataTable({
          ajax: {
              url: "${ctx}/dic/getbypage"
          },
          serverSide: true,
          columns: [
              {"data": "id"},
              {"data": "type"},
              {"data": "typeName"},
              {"data": "datetime"},
              {"data": "desc"},
              {"data": "money"},
              {"data": "statetext"},
              {"data": "state"}
          ]
      });
 
  });
  </script>

4、后台代码如下：

public void getByPage(){
        List<Dic> dList = Expense.dao.find("select * from t_dic  group by id desc");
        setAttr("data", dList);
        renderJson();
    }

5、页面展示如下：

6、此时发现展示的效果都是英文的，所以需要加载汉化语言包，js代码如下：

<script type="text/javascript">
      $(function(){
        table = $('#grid').DataTable({
            "dom":'<ltip>',//dom，对属性调整文职
            "processing" : true,
            "autoWidth":false,//是否自适应宽度
            "lengthMenu": [5, 10, 20, 50],//每页显示的数目
            "jQueryUI": true,//是否使用jqueryui的样式
            "searching":false,//是否开启搜索
            "info" : true,//分页信息
            "order":[[0,"desc"]],//排序
            ajax:{
                url:"${ctx}/dic/getPage"
            },
            "language":{//汉化语言包
                "lengthMenu":" _MENU_ 条记录每页",
                "zeroRecords":"没有找到记录",
                "info":"第 _PAGE_ 页 (共 _PAGES_ 页 )",
                "infoEmyty":"无记录",
                "infoFiltered":"(从 _MAX_ 条记录过滤)",
                "paginate":{
                    "previous":"上一页",
                    "next":"下一页",
                }
            },
            serverSide:true,//是否由服务器处理分页
            columns:[
               {"data":"dictvalue"},
               {"data":"id"},
               {"data":"parentid"},
               {"data":"dictdesc"},
               {"data":null}//想修改值，就设置为空
               ],
               "columnDefs": [ 
              {
              "render": function(data, type, row) {//data代表的想要获取的值，row代表的是需要控制的行数
                      return  "<button type='button' class='btn btn-primary btn-xs' οnclick='edit(\""+data.id+"\")' >编辑</button> <button type='button' οnclick='del(\""+data.id+"\")' class='btn btn-danger btn-xs'>删除</button>";  //这里要设置自定义的按钮，点击事件需要转义的
              },
              "targets": 4//控制的行数
          }

          ]

        });
          $("#grid_info").css("margin","20px 0");
        });
        /**
         *添加事件
         */
        function add(){
            alert(111);
            window.location.href="${ctx}/dic/add";
        }
        /**
         *编辑事件
         */
        function edit(id){
          alert(id);
          window.location.href="${ctx}/dic/edit?id="+id;
      }  
        /**
         *删除事件
         */
        function del(id){
          alert(id);
          bootbox.setLocale("zh_CN");
            bootbox.confirm({
              //title : '站点删除确认',
              message : '亲，你确认删除吗？三思啊！',
              callback : function(r){
                  if(r){
                       window.location.href="${ctx}/dic/del?id="+id;
                  }
              }
          });

        }
    </script> 

7、后台代码展示如下：

    public void getPage(){
         String draw = "0";
            draw =getPara("draw");
            //数据起始位置
            String start = getPara("start");
            //总记录数
            String recordsTotal = Db.queryLong("select count(*) from t_dic").toString();
            //数据长度
            String length = getPara("length"); 
            //定义需要排序的列
            String[] cols = {"id", "dictvalue"};
            String orderColumn = getPara("order[0][column]");
            orderColumn = cols[Integer.parseInt(orderColumn)];
            String orderDir = "asc";//默认方式是asc
            orderDir = getPara("order[0][dir]");
            String sql = "select * from t_dic  order by "+orderColumn+" "+orderDir+" limit "+start+","+length+"";

        List<Dic> dList = Dic.dao.find(sql);
        setAttr("dList", dList);
        setAttr("data", dList);
        setAttr("recordsTotal", recordsTotal);
        setAttr("recordsFiltered", recordsTotal);
        renderJson();
    }

最终的展示效果如下：