强大的表格控件-Datatables

背景介绍

是不是习惯了EasyUI封装的DataGrid表格,传入一个json串,就可以自动加载数据,显示分页,还能实现一些特殊需求,如行内编辑,操作列等。而使用bootstrap表格的话,则需要完全自己手写table和分页控件,并且将两者组合到一起,才是个完整的表格,代码量大不说,如果需要实现一些特殊的需求,行内编辑等那就更加繁琐了。


Datatables

所以我寻找到了一款bootstrap风格的第三方表格插件:datatables。

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以给任何HTML表格添加高级的交互功能。提供分页,即时搜索和排序等功能,另外官网还给出了一些实现个性化功能的demo,如行内编辑,行折叠特效等。

更多特性请到官网查看: http://datatables.club/example/


如何使用


① 引入css和js文件

<link href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-3.3.0-dist/dist/css/bootstrap-responsive.min.css" rel="stylesheet">
<!—datatables的样式文件,我修改了其默认分页按钮的样式,所以加了后缀itoo ,和官网下载的不一样-->
<link href="bootstrap-3.3.0-dist/dist/css/jquery.dataTables-itoo.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
<!-- datatables JavaScript 文件 -->
<script src="bootstrap-3.3.0-dist/dist/js/jquery.dataTables.min.js"></script>

默认分页样式:这里写图片描述

修改后样式:这里写图片描述

附件: 上述文件均打包在附件中,点我下载


② Html代码

<body>
    <div class="row-fluid" style="margin-top: 20px">
    <div class="span1"></div>
    <div class="span10">

    <table id="table_local" class="row-border hover order-column" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>教师编号</th>
                <th>姓名</th>
                <th>组织机构</th>
                <th>课程类型</th>
                <th>课程名称</th>
                <th>总得分</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>

建立一个table标签,<thead>和空的<tbody>即可。


③JS代码

<script type="text/javascript">
    var table; 
    $(document).ready(function() {
    var lastIdx = null;
<!--datatables表格初始化方法-->
    table = $('#table_local').DataTable({
        //通过ajax向后台controller请求数据
        ajax : {
            url : "queryPageAssessResult",
            dataSrc : " coursedata ",
            data : function ( d )  {
                 var searchContent = $('#searchContent').val();  
                //添加额外的参数传给服务器  
                d.extra_search = searchContent; 
            }
        },
        //绑定列数据,名字和json串里的key相同,只有这里绑定了表格中才会显示数据
        columns : [
            {data : 'teacherCode'},
            {data : 'teacherName'},
            {data : 'teacherDepartment'},
            {data : 'courseType'},
            {data : 'courseName'},
            {data : 'avgScore'} 
        ],
        processing : true, //打开数据加载时的等待效果
        serverSide : true,//打开后台分页  
        ordering : false,//是否启用排序
        searching : false,//是否  启用模糊搜索
        //当处理大数据时,延迟渲染数据,有效提高Datatables处理能力
        deferRender : true,
        //国际化设置(设置中文显示)
        language : {
            lengthMenu : '<div style="float:left;height:33px;line-height:33px;overflow:hidden;text-align:center" >每页条数:</div><div style="float:left"><select class="form-control input-xsmall" style="float:right">'
                    + '<option value="1">1</option>'
                    + '<option value="5">5</option>'
                    + '<option value="10">10</option>'
                    + '<option value="20">20</option>'
                    + '<option value="30">30</option>'
                    + '<option value="40">40</option>'
                    + '<option value="50">50</option>'
                    + '</select></div>',//左上角的分页大小显示。

            search : '<span class="label label-success">搜索:</span>',//右上角的搜索文本,可以写html标签

            paginate : {//分页的样式内容。
                previous : "上一页",
                next : "下一页",
                first : "第一页",
                last : "最后"
            },

            zeroRecords : "没有内容",//table tbody内容为空时,tbody的内容。
            //下面三者构成了总体的左下角的内容。
            info : "共_PAGES_ 页,显示第_START_ 到第 _END_ ,共_MAX_ 条 ",//左下角的信息显示,大写的词为关键字。
            infoEmpty : "0条记录",//筛选为空时左下角的显示。
            infoFiltered : ""//筛选之后的左下角筛选提示,
        },
        paging : true,
        pagingType : "full_numbers"//分页样式的类型full_numbers
    });

    $("#table_local_filter input[type=search]").css({
        width : "auto"
    });//右上角的默认搜索文本框,不写这个就超出去了。


    //鼠标经过时高亮
    $('#table_local tbody').on( 'mouseover', 'td', function () {
        var colIdx = table.cell(this).index().column;
        if ( colIdx !== lastIdx ) {
            $( table.cells().nodes() ).removeClass( 'highlight' );
            $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
        }
     } ).on( 'mouseleave', function () {
        $( table.cells().nodes() ).removeClass( 'highlight' );
     } );

    //点击某行后高亮
    $('#table_local tbody').on( 'click', 'tr', function () {
       if ( $(this).hasClass('selected') ) {
           $(this).removeClass('selected');
       }
       else {
           table.$('tr.selected').removeClass('selected');
           $(this).addClass('selected');
       }
    } );


    //鼠标双击事件,弹出提示。
    $('#table_local tbody').on('dblclick','tr',function() {
              //获取该行数据
            var data = table.row(this).data();
            //做一些其他操作
    });

});

</script>

其中ajax.data参数和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务端,而ajax.data仅仅是对这个信息类进行调整和添加.

添加方式, ajax.data可以直接赋值一个对象,这个对象的属性会添加到原信息类里面去一起发送到服务端.例如:

$('#example').dataTable( {
    "ajax": {
      "url": "data.json",
      "data": {
          "user_id": 451
    }
  }
} );

另外一种选择是传入一个方法,方法的参数就是当前发送到服务器的信息类,在方法中可以修改这个信息类.

$('#example').dataTable( {

  "ajax": {

    "url": "data.json",

    "data": function ( d ) {

        d.extra_search = $('#extra').val();

    }

  }

} );

④ 后台controller代码

    /**
     * @Description: 课程评估结果查询
     * @author 牛迁迁
     * @date 2015年12月9日 上午12:35:21
     * @param request
     * @param response
     * @throws UnsupportedEncodingException
     */
    @SuppressWarnings(
    { "unchecked", "rawtypes" })
    @RequestMapping(value = "/queryPageAssessResult", method = RequestMethod.GET)
    public void queryPageAssessResult(HttpServletRequest request,
            HttpServletResponse response) throws UnsupportedEncodingException
{
        request.setCharacterEncoding("UTF-8");
        // 数据起始位置
        String start = request.getParameter("start");
        // 数据长度 每页多少条数据
        String length = request.getParameter("length");
        // 获取前台传递过来的查询条件
        String conditions = request.getParameter("extra_search");
        // 进行转码操作,转成UTF-8编码格式
        conditions = new String(conditions.getBytes("ISO-8859-1"), "UTF-8");
        // 获取所操作的库名称
        String dbName = "itoo_exam";

        // 转换分页参数
        int pageSize = Integer.parseInt(length);
        int pageNum = Integer.parseInt(start) / pageSize + 1;
        System.out.println("每页条数:======" + pageSize);
        System.out.println("当前页号:======" + pageNum);
        // 转Json工具类
        toJsonUtil = new JacksonJsonUntil();

        // 实例化一个分页类
        PageEntity<CourseAssessResult> pageCourseAssessResult = new PageEntity<CourseAssessResult>();

        try
        {
            // 第1种情况:无条件分页查询
            if (conditions == null || conditions == "")
            {

                pageCourseAssessResult = courseAssessResultBean
                        .queryPageCourseAssessResult(pageNum, pageSize, dbName);

            }
            else
            {
                // 第2种情况:有条件分页查询
                pageCourseAssessResult = courseAssessResultBean
                        .queryPageCourseAssessResultByCondition(pageNum,
                                pageSize, conditions, dbName);
            }
            // 如果查询信息为空也重新绑定数据。
            if (pageCourseAssessResult.getRows() == null) {
                List<CourseAssessResult> courseTypeList = new ArrayList<CourseAssessResult>();
                pageCourseAssessResult.setRows(courseTypeList);
            }
            System.out.println(pageCourseAssessResult.getTotal());
            //声明一个map,往前台传值
            Map<Object, Object> info = new HashMap<Object, Object>();
            //查询到的实体信息
            info.put("coursedata", pageCourseAssessResult.getRows());
            //实体信息总条数
            info.put("recordsTotal", pageCourseAssessResult.getTotal());

            toJsonUtil.beanToJson(response, info);
        }
        catch (Exception e)
        {
            e.printStackTrace();
        }

    }

Controller的作用主要是获取前台传递过来的参数,并根据参数调用Server层方法查询到结果,然后将结果按照datatables指定的格式返回给前台。这个格式就是:

//声明一个map,往前台传值
Map<Object, Object> info = new HashMap<Object, Object>();
//查询到的实体信息
info.put("coursedata", pageCourseAssessResult.getRows());
//实体信息总条数
info.put("recordsTotal",pageCourseAssessResult.getTotal());

coursedata这个名称是咱们在JS里,dataSrc : " coursedata "指定的,意思是加载返回的数据源,如果返回的集合不是这个名称,将不能绑定值;recordsTotal是记录总数,参数名称必须是这个,没商量。


⑤ 显示效果

这里写图片描述


小结

本篇博客主要讲解了Datatables的使用,我们喜欢EasyUI封装的功能,同时也中意Bootstrap封装的样式,要想鱼和熊掌兼得,那就需要用Datatables啦。
学会站在巨人的肩膀上,哈哈。。

发布了189 篇原创文章 · 获赞 470 · 访问量 74万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览