index.ftl 5.44 KB
<!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>
                            <a href="/projects/create">新增</a>
                            <a href="/projects/projectsExcelDownloads">导出</a>
						</li>

					</ul><!-- /.breadcrumb -->
				</div>
                <#--<div class="page-header">-->

                    <#--<a href="/projects/create" class="btn btn-success" role="button">新增项目</a>-->

                    <#--&lt;#&ndash;<div class="col-sm-3 pull-right">&ndash;&gt;-->
                        <#--&lt;#&ndash;<input type="text" class="form-control search-query" id="name" placeholder="代理商名称/手机号码"/>&ndash;&gt;-->
                    <#--&lt;#&ndash;</div>&ndash;&gt;-->
                <#--</div><!-- /.page-header &ndash;&gt;-->

				<!-- /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>
										</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_ 条 &nbsp;&nbsp;共 _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": 'usersName',
                    "sDefaultContent" : "",
                    "sClass" : "center"
                },
                {
                    "mDataProp": function (obj) {
                        return getMyDate(obj.startTime);
                    },
                    "sDefaultContent": "",
                    "sClass": "center"
                }
			],
			aoColumnDefs: [
			],
			bProcessing: true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
			sPaginationType: "full_numbers"
		});
	});

    function getProjectId(projectId){
		alert(projectId+"projectId");
        $("#mode_projectId").val(projectId);

    }

</script>
</body>
</html>