jquery datatables学习笔记（一）

　　最近项目中用到了jquery datatables表格插件展示数据，发现这个插件功能非常强大，刚开始接触遇到了很多问题，花了很多时间来研究，现在基本会用了，所以做个笔记，以后直接拿来用。

　　以下是基于jquery datatables 1.10.5来做的。

　　1.数据库表

　　2.HTML部分

1 <link type="text/css" rel="stylesheet" href="css/jquery.dataTables.css" />
2 <link type="text/css" rel="stylesheet" href="css/demo_page.css" />
3 
4 <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
5 <script type="text/javascript" src="js/jquery.dataTables.js"></script>

 

1 <body id="dt_example">
2     <div id="container">
3         <table id="example" class="display" cellspacing="0" width="100%"></table>
4     </div>
5 </body>

　　3.JS部分

　　之所以把"bServerSide"注释掉，是因为它为true时，表示表格的分页数据由后台提供，需要向后台传递多个参数，比如每页显示数据条数、第一行数据是从数据库中的多少条开始，每进入一页都要重新请求数据，适合数据量大的场合，注释掉后表示一次请求获取全部数据，分页由它自己自动计算。

$('#example').dataTable({
            "bProcessing" : true, //载入数据时是否显示进度提示
            //"bServerSide" : true, //是否启动服务器端数据导入
            "bPaginate": true, //翻页功能
            "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
            "sPaginationType" : "full_numbers",
            "sAjaxSource" : 'tables/getData.do',
            "aLengthMenu": [5, 10, 20],//定义每页显示数据量
            "aoColumns" : [
                    {
                        "mDataProp" : "id",
                        "sTitle" : "<input type='checkbox'  name='allbox' id='allbox' onclick='check();' />",
                        "sDefaultContent" : "",
                        "bSortable" : false,
                        "mRender" : function(data, display, row) {
                            return "<input type='checkbox' id='"+data+"' name='idList' value='"+data+"'/>";
                        }
                    }, {
                        "mDataProp" : "name",
                        "sTitle" : "姓名",
                        "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
                        "sClass" : "center",
                    }, {
                        "mDataProp" : "sex",
                        "sTitle" : "性别",
                        "sDefaultContent" : "",
                        "sClass" : "center",
                    }, {
                        "mDataProp" : "age",
                        "sTitle" : "年龄",
                        "sDefaultContent" : "",
                        "sClass" : "center",
                    }, {
                        "mDataProp" : "birthday",
                        "sTitle" : "生日",
                        "sDefaultContent" : "",
                        "sClass" : "center",
                    } ],
            "oLanguage" : {
                "sProcessing": "正在加载中......",  
                  "sLengthMenu": "每页显示 _MENU_ 条记录",  
                  "sZeroRecords": "对不起，查询不到相关数据！",  
                  "sEmptyTable": "表中无数据存在！",  
                  "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",  
                  "sInfoFiltered": "数据表中共为 _MAX_ 条记录",  
                  "sSearch": "搜索",  
                  "oPaginate": {  
                      "sFirst": "首页",  
                      "sPrevious": "上一页",  
                      "sNext": "下一页",  
                      "sLast": "末页"  
                  }
            }
        });

　　4.后台SpringMVC代码

1 @RequestMapping(value = "/getData", method = RequestMethod.GET)
2 @ResponseBody
3 public Object getData2(HttpServletRequest request) {
4     List<Student> students = studentService.getAll();
5     Map map = new HashMap();
6     map.put("aaData", students);
7     return map;
8 }

　　5.显示效果

　　以上只是最基本的用法，它的功能远不止这些，还有它的样式也可以自定义，以后继续研究。

posted @ 2015-06-24 22:09  =======>  阅读(272)  评论(0)    收藏  举报