DataTables 的 实例 《一》

1.加载需要的js/css文件

<link href='/dataTables/css/dataTables.bootstrap.min.css' rel="stylesheet" type="text/css" />
<link href='/dataTables/css/jquery.dataTables.min.css' rel="stylesheet" type="text/css" />
<script src='/dataTables/js/jquery.dataTables.js' type="text/javascript"></script>
<script src='/dataTables/js/dataTables.bootstrap.js' type="text/javascript"></script>

2.

<%@ taglib prefix="s" uri="/struts-tags"%>

<script type="text/javascript">
function del(id){
   alert(id);
}

var table;
$(document).ready(function() {
    
    table = $('#example').dataTable( {
        "processing": true,
        "aoColumns" : [  {"mData" : 'col1', "sTitle" : 'ID',"sWidth": "100px"},
                       {"mData" : 'col2', "sTitle" : 'label' ,"sWidth": "100px" },
                       {"mData" : 'col3', "sTitle" : 'pk', "sClass" : "center"},
                       {"mData" : 'col4', "sTitle" : 'ck',orderable: false},
                       {"mData" : 'col5', "sTitle" : 'lll',orderable: false},
                       {"mData" : 'col6', "sTitle" : 'information'},
                       {"mData" : 'col7', "sTitle" : 'tav', "bSearchable": false },
                       {"mData" : 'col8', "sTitle" : 'statue',"visible": false},
                       {"mData" : 'col9', "sTitle" : 'TOOL',orderable: false}
        ],
        ajax: {
            url: "testCase.search.action"
        },
        columnDefs:[{
            orderable:false,
            targets:[0,2] 
        }],
        "order": [0, 'desc'],
        "dom": "<'row'<'#mytool.col-xs-5'><'col-xs-7'f>r>" 
            +"t" +"<'row'<'col-xs-4'i><'col-xs-6'l><'col-xs-8'p>>",
        "initComplete": function () {
           $("#mytool").append('<button type="button" id="adc" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">add</button>')
           .append('  <button type="button" id="adc" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">add</button>');
        },
        "oLanguage":
        {
            "sSearch": "ss",
             "oPaginate": {
                "sFirst": "1",
                 "sNext": "123",
                "sLast": "0"
        }}
    });
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            //table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
    $('#aaa').click( function () {
        alert( table.$('tr.selected').eq(0).text());
        alert( table.$('tr.selected').text());
        table.$('tr.selected').re;
    });
});

           
</script>
<div class="container">
    <button id="aaa" class="btn btn-default">button</button>
    <table id="example"  class="table display" cellspacing="0" width="100%"></table>
</div>

ajax：从后台返回的数据格式：

{"aaData":[{"col1":"\t1\t","col2":"\t1\t","col3":"\tasddd1\t","col4":2,"col5":"\tLLO1\t","col6":"\tTom1\t","col7":"\tTommonsd1\t","col8":"\tew\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t1\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t1\t);'/>update<\/button>"},{"col1":"\t10\t","col2":"\t1\t","col3":"\tasddd10\t","col4":2,"col5":"\tLLO10\t","col6":"\tTom10\t","col7":"\tTommonsd10\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t10\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t10\t);'/>update<\/button>"},{"col1":"\t11\t","col2":"\t1\t","col3":"\tasddd11\t","col4":2,"col5":"\tLLO11\t","col6":"\tTom11\t","col7":"\tTommonsd11\t","col8":"\tewrew\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t11\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t11\t);'/>update<\/button>"},{"col1":"\t12\t","col2":"\t1\t","col3":"\tasddd12\t","col4":2,"col5":"\tLLO12\t","col6":"\tTom12\t","col7":"\tTommonsd12\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t12\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t12\t);'/>update<\/button>"},{"col1":"\t13\t","col2":"\t1\t","col3":"\tasddd13\t","col4":2,"col5":"\tLLO13\t","col6":"\tTom13\t","col7":"\tTommonsd13\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t13\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t13\t);'/>update<\/button>"},{"col1":"\t14\t","col2":"\t1\t","col3":"\tasddd14\t","col4":2,"col5":"\tLLO14\t","col6":"\tTom14\t","col7":"\tTommonsd14\t","col8":"\tfdb\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t14\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t14\t);'/>update<\/button>"},{"col1":"\t15\t","col2":"\t1\t","col3":"\tasddd15\t","col4":2,"col5":"\tLLO15\t","col6":"\tTom15\t","col7":"\tTommonsd15\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t15\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t15\t);'/>update<\/button>"},{"col1":"\t16\t","col2":"\t1\t","col3":"\tasddd16\t","col4":2,"col5":"\tLLO16\t","col6":"\tTom16\t","col7":"\tTommonsd16\t","col8":"\tfdb\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t16\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t16\t);'/>update<\/button>"},{"col1":"\t17\t","col2":"\t1\t","col3":"\tasddd17\t","col4":2,"col5":"\tLLO17\t","col6":"\tTom17\t","col7":"\tTommonsd17\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t17\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t17\t);'/>update<\/button>"},{"col1":"\t18\t","col2":"\t1\t","col3":"\tasddd18\t","col4":2,"col5":"\tLLO18\t","col6":"\tTom18\t","col7":"\tTommonsd18\t","col8":"\tgfb\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t18\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t18\t);'/>update<\/button>"},{"col1":"\t19\t","col2":"\t1\t","col3":"\tasddd19\t","col4":2,"col5":"\tLLO19\t","col6":"\tTom19\t","col7":"\tTommonsd19\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t19\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t19\t);'/>update<\/button>"},{"col1":"\t2\t","col2":"\t1\t","col3":"\tasddd2\t","col4":2,"col5":"\tLLO2\t","col6":"\tTom2\t","col7":"\tTommonsd2\t","col8":"\tew\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t2\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t2\t);'/>update<\/button>"},{"col1":"\t20\t","col2":"\t1\t","col3":"\tasddd20\t","col4":2,"col5":"\tLLO20\t","col6":"\tTom20\t","col7":"\tTommonsd20\t","col8":"\tfdb\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t20\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t20\t);'/>update<\/button>"},{"col1":"\t21\t","col2":"\t1\t","col3":"\tasddd21\t","col4":2,"col5":"\tLLO21\t","col6":"\tTom21\t","col7":"\tTommonsd21\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t21\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t21\t);'/>update<\/button>"},{"col1":"\t22\t","col2":"\t0\t","col3":"\tasddd22\t","col4":2,"col5":"\tLLO22\t","col6":"\tTom22\t","col7":"\tTommonsd22\t","col8":"\tv\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t22\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t22\t);'/>update<\/button>"},{"col1":"\t23\t","col2":"\t0\t","col3":"\tasddd23\t","col4":2,"col5":"\tLLO23\t","col6":"\tTom23\t","col7":"\tTommonsd23\t","col8":"\tcxbv\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t23\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t23\t);'/>update<\/button>"},{"col1":"\t24\t","col2":"\t0\t","col3":"\tasddd24\t","col4":2,"col5":"\tLLO24\t","col6":"\tTom24\t","col7":"\tTommonsd24\t","col8":"\txcv\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t24\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t24\t);'/>update<\/button>"},{"col1":"\t25\t","col2":"\t0\t","col3":"\tasddd25\t","col4":2,"col5":"\tLLO25\t","col6":"\tTom25\t","col7":"\tTommonsd25\t","col8":"\tjhm\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t25\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t25\t);'/>update<\/button>"},{"col1":"\t3\t","col2":"\t1\t","col3":"\tasddd3\t","col4":2,"col5":"\tLLO3\t","col6":"\tTom3\t","col7":"\tTommonsd3\t","col8":"\tewrew\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t3\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t3\t);'/>update<\/button>"},{"col1":"\t4\t","col2":"\t1\t","col3":"\tasddd4\t","col4":2,"col5":"\tLLO4\t","col6":"\tTom4\t","col7":"\tTommonsd4\t","col8":"\ter\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t4\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t4\t);'/>update<\/button>"},{"col1":"\t5\t","col2":"\t1\t","col3":"\tasddd5\t","col4":2,"col5":"\tLLO5\t","col6":"\tTom5\t","col7":"\tTommonsd5\t","col8":"\tr\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t5\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t5\t);'/>update<\/button>"},{"col1":"\t6\t","col2":"\t1\t","col3":"\tasddd6\t","col4":2,"col5":"\tLLO6\t","col6":"\tTom6\t","col7":"\tTommonsd6\t","col8":"\tre\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t6\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t6\t);'/>update<\/button>"},{"col1":"\t7\t","col2":"\t1\t","col3":"\tasddd7\t","col4":2,"col5":"\tLLO7\t","col6":"\tTom7\t","col7":"\tTommonsd7\t","col8":"\tewfwe\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t7\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t7\t);'/>update<\/button>"},{"col1":"\t8\t","col2":"\t0\t","col3":"\tasddd8\t","col4":2,"col5":"\tLLO8\t","col6":"\tTom8\t","col7":"\tTommonsd8\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t8\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t8\t);'/>update<\/button>"},{"col1":"\t9\t","col2":"\t1\t","col3":"\tasddd9\t","col4":2,"col5":"\tLLO9\t","col6":"\tTom9\t","col7":"\tTommonsd9\t","col8":"\t\t","col9":"<button type='button' class='btn btn-info' οnclick='javascript:del(\t9\t);'/>delete<\/button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(\t9\t);'/>update<\/button>"}]}

这个是后台的action

 @Inject
    TCService tcService;

    /**
     * {@inheritDoc}
     * 
     * @see com.opensymphony.xwork2.ActionSupport#input()
     */
    @Override
    public String input() {
        System.out.println("---join in suncess -for test case");
        return INPUT;
    }

    public void findNav() throws IOException {
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("text/html;charset=utf-8");
        List<Dto> listDato = tcService.findAll();
        String jsonResults = loadTableDataJSON(listDato);
        System.out.println(jsonResults);
        PrintWriter out = response.getWriter();
        out.println(jsonResults);

    }

    private String loadTableDataJSON(List<Dto> listDto) {
        JSONObject obj = new JSONObject();
        JSONArray lineItemArray = new JSONArray();
        JSONObject jsonObj = null;
        for (Dto dto : listDto) {
            jsonObj = new JSONObject();
            jsonObj.put("col1", dto.getId());
            jsonObj.put("col2", dto.getFlash());
            jsonObj.put("col3", dto.getInformation());
            jsonObj.put("col4", 2);
            jsonObj.put("col5", dto.getIntool());
            jsonObj.put("col6", dto.getName());
            jsonObj.put("col7", dto.getUsername());
            jsonObj.put("col8", dto.getValue());
            String actionStr = "<button type='button' class='btn btn-info' οnclick='javascript:del(" + dto.getId()
                    + ");'/>delete</button>    <button type='button' class='btn btn-info' οnclick='javascript:upd(" + dto.getId()
                    + ");'/>update</button>";
            jsonObj.put("col9", actionStr);
            lineItemArray.add(jsonObj);
        }
        obj.put("aaData", lineItemArray);
        return obj.toString();
    }

----------------------------------

dataTables
1.DOM 操作 页面table中位置排放：
l - Length changing 每页显示多少条数据选项
f - Filtering input 搜索框
t - The Table 表格
i - Information 表格信息
p - Pagination 分页按钮
r - pRocessing 加载等待显示信息
< and > - div elements 一个div元素
<"#id" and > - div with an id 指定id的div元素
<"class" and > - div with a class 指定样式名的div元素
<"#id.class" and > - div with an id and class 指定id和样式的div元素
"dom": "<'row'<'#mytool.col-xs-5'><'col-xs-7'f>r>" +"t" +"<'row'<'col-xs-5'i><'col-xs-2'l><'col-xs-6'p>>",
2.禁止某一列排序orderable
orderable: false
 {"mData" : 'col4', "sTitle" : 'ck', orderable : false},
 或
 columnDefs:[{
            orderable:false,
            targets:[0,2] //指定的某一列
        }],
3.隐藏列visible
 {"mData" : 'col8', "sTitle" : 'statue',"visible": false},或
  columnDefs:[
{ "targets": [ 2 ],
    "visible": false,
    "searchable": false
},
{
    "targets": [ 3 ],
    "visible": false
}],
4.判断列是否参与搜索用bSearchable
{"mData" : 'col7', "sTitle" : 'tav', "bSearchable": false },
5.设置table的宽度
{"mData" : 'col1', "sTitle" : 'ID',"sWidth": "50%"},
{"mData" : 'col2', "sTitle" : 'label' ,"sWidth": "100px" },
6.分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button  或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
7.语言
"oLanguage":
{
   "sProcessing": "正在加载中......",
     "sLengthMenu": "每页显示 _MENU_ 条记录",
     "sZeroRecords": "对不起，查询不到相关数据！",
      "sEmptyTable": "表中无数据存在！",
    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
    "sSearch": "搜索",
     "oPaginate": {
        "sFirst": "首页",
         "sPrevious": "上一页",
         "sNext": "下一页",
        "sLast": "末页"
}
8.使用JQueryUI
"bJQueryUI": true
9.获取选中一行的信息
$('#aaa').click( function () {
        table.$('tr.selected').eq(0).text();
    } );