DataTables 的 实例 《一》

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

2.

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



    button
    

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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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":"delete<\/button>    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 listDato = tcService.findAll();
        String jsonResults = loadTableDataJSON(listDato);
        System.out.println(jsonResults);
        PrintWriter out = response.getWriter();
        out.println(jsonResults);

    }

    private String loadTableDataJSON(List 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 = "delete    update";
            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();
    } );