index.ftl
5.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<#include "../common/head.ftl"/>
<body class="no-skin">
<#include "../common/top.ftl" />
<div class="main-container ace-save-state" id="main-container">
<#include "../common/left.ftl" />
<!-- /section:basics/sidebar -->
<div class="main-content">
<div class="main-content-inner">
<!-- #section:basics/content.breadcrumbs -->
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
<ul class="breadcrumb">
<li>
<i class="ace-icon fa fa-home home-icon"></i>
<a href="#">项目列表</a>
</li>
</ul><!-- /.breadcrumb -->
</div>
<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<table id="simple-table-projects" class="table table-bordered table-hover">
<thead>
<tr>
<th class="center">编号</th>
<th class="center">项目名称</th>
<th class="center">详情描述</th>
<th class="center">创建人</th>
<th class="center">开始时间</th>
<th class="center">状态</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot></tfoot>
</table>
</div><!-- /.span -->
</div><!-- /.row -->
<!-- PAGE CONTENT ENDS -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
<#include "../common/footer.ftl"/>
</div><!-- /.main-container -->
<#include "../common/footscripts.ftl"/>
<script type="text/javascript">
jQuery(function($) {
// $('#name').bind(' input propertychange ',function(){
// table.column(2).search($(this).val()).draw();
// });
var extensions = {
"sFilter": "simple-table_filter hide",
"sLength": "simple-table_length custom_length_class"
};
// Used when bJQueryUI is false
$.extend($.fn.dataTableExt.oStdClasses, extensions);
// Used when bJQueryUI is true
//$.extend($.fn.dataTableExt.oJUIClasses, extensions);
$.extend( true, $.fn.dataTable.defaults, {
"searching": false
});
var table = $('#simple-table-projects').DataTable({
ajax: {
url: "/projects/projectsList",
type:"GET",
//dataSrc : "list",//这个参数是自己封装的json里面的key
data: {
}
},
serverSide : true,//开启服务器模式:启用服务器分页
pageLength: 10,//每页显示十条数据
bPaginate: true, //翻页功能
bLengthChange: true, //改变每页显示数据数量
bFilter: true, //过滤功能
bSort: false, //排序功能
Info: true,//页脚信息
bAutoWidth: false,//自动宽度
bJQueryUI: false,
bStateSave : false,
aLengthMenu: [[10, 25, 50], [10, 25, 100]],
sDom: "<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>",
oLanguage: {//下面是一些汉语翻译
"sSearch": "搜索",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "没有检索到数据",
"sInfo": "显示 _START_ 至 _END_ 条 共 _TOTAL_ 条",
"sInfoFiltered": "(筛选自 _MAX_ 条数据)",
"sInfoEmtpy": "没有数据",
"sProcessing": "正在加载数据...",
//"sProcessing": "<img src='{{rootUrl}}global/img/ajaxLoader/loader01.gif' />", //这里是给服务器发请求后到等待时间显示的 加载gif
"oPaginate":
{
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "末页"
}
},
columns: [ //这个属性下的设置会应用到所有列，按顺序没有是空
{
"data": 'id',
"sClass" : "center"
},
{
"data": 'projectName',
"sClass" : "left",
render: function(data, type, row, meta) {
var projectId = row.id;
return '<a href="/projects/'+projectId+'/details" >'+data+'</a>';
}
},
{
"data": 'remark',
"sDefaultContent" : "",
"sClass" : "left"
},
{
"data": 'usersName',
"sDefaultContent" : "",
"sClass" : "center"
},
{
"mDataProp": function (obj) {
return getMyDate(obj.startTime);
},
"sDefaultContent": "",
"sClass": "center"
},
{
"data": 'state',
"sDefaultContent" : "",
"sClass" : "center"
}
],
aoColumnDefs: [
{"sWidth": "500px", "aTargets": [2]}
],
bProcessing: true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
sPaginationType: "full_numbers"
});
});
function getProjectId(projectId){
alert(projectId+"projectId");
$("#mode_projectId").val(projectId);
}
</script>
</body>
</html>