index.ftl 6.51 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="/investigate/create">新增</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-investigates" 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>
                                        <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($) {

        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-investigates').DataTable({
            ajax: {
                url: "/investigate/investigateList",
                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": 'companyName',
                    "sClass" : "center",
                    render: function(data, type, row, meta) {
                        var companyId = row.id;
                        return '<a href="/investigate/'+companyId+'/details" >'+data+'</a>';
                    }
                },
                {
                    "data": 'name',
//                    "sDefaultContent" : "",
                    "sClass" : "center"
                },
                {
                    "data": 'job',
                    "sDefaultContent" : "",
                    "sClass" : "center"
                },
                {
                    "data": 'mobile',
                    "sClass": "left"
                },
                {
                    "data": 'customerManager',
                    "sClass": "left"
                },
                {
                    "data": 'managerMobile',
                    "sClass": "left"
                },
                {
                    "data": 'unreadChatRecord',
                    "sDefaultContent" : "",
                    "sClass" : "center"
                }
            ],
//            aoColumnDefs: [
//                {"sWidth": "500px", "aTargets": [2]}
//            ],
            bProcessing: true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好
            sPaginationType: "full_numbers"
        });
    });

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