• datatable-固定行固定列


    之前用fixed-table.js 写了一个固定行,固定列的效果,缺点是 无法随着屏幕自适应宽度,所以被产品pass掉了,还是继续看datatable的坑。

    datatable这个是一个很强大的表格工具,之前只有英文文档,用于系统管理平台的开发有很大的用处,现在出了中文文档,更方便了。

    现在记录一下实现步骤,方便以后继续研究。

    实现的效果图,原理应该都是一样的 三个表格,实现固定行,固定列,不过datatable 是一套配置,自动生成的。

    1.资源:

    css:

        <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css" />
        <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css" />
        <link rel="stylesheet" type="text/css" href="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css" />

     js:

    <script type="text/javascript" src="assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
    <script type="text/javascript" src="assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js"></script>
    <script type="text/javascript" src="assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
    <script type="text/javascript" src="assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
    <script type="text/javascript" src="assets/global/plugins/datatables/extensions/FixedColumns/js/dataTables.fixedColumns.min.js"></script>

    实现:

    html:

    js

       $('#sample_6').DataTable({
                //文案展示
                "language": {
                    "sProcessing": "处理中...",
                    "sLengthMenu": "显示 _MENU_ 项结果",
                    "sZeroRecords": "没有匹配结果",
    
                    "sInfo": "",
                    // "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                    "sInfoEmpty": "",
                    "sInfoFiltered": "",
                    "sInfoPostFix": "",
                    "sSearch": "搜索:",
                    "sUrl": "",
                    "sEmptyTable": "表中数据为空",
                    "sLoadingRecords": "载入中...",
                    "sInfoThousands": ",",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上页",
                        "sNext": "下页",
                        "sLast": "末页"
                    }
                },
                //ajax 请求接口
                "sAjaxSource": "json/data.json",
                // "sAjaxSource": "/join/GetListPage",
                //搜索按钮
                "searching": false,
                // "serverSide": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    //这个是点击 搜索以后触发的事件  重新掉了一次请求
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    })
                },
                "paging": false,
                // "paging": true,
                "lengthChange": false,
                "ordering": false,
                "iDisplayLength": 10,
                "info": true,
                "autoWidth": true,
                bStateSave: true,
                //横向滚动
                sScrollX: "100%",
                //纵向高度 滚动
                sScrollY:'300',
                sScrollXInner: "110%",
                bScrollCollapse: false,
                fixedColumns: {
                    //固定列的配置项
                    leftColumns: -1,//-1第一列不固定,默认固定第一列
                    rightColumns: 2 //固定右边第一列
                },
                bDestory: true,
                bServerSide: true,
    
                "columns": [
                    //data :Guestguid 对应的 数据的字段名
                    { "data": "no", className: "text-center" },
                    {"data": "Guestguid", className: "text-center"},
                    { "data": "Type", className: "text-center", },
                    { "data": "Contactname", className: "text-center", },
    
                    { "data": "FullName", className: "text-center", },
                    { "data": "Gender", className: "text-center", },
                    { "data": "InvitationCompany", className: "text-center", },
                    { "data": "WorldTop", className: "text-center", },
                    { "data": "ChinaTop", className: "text-center", },
    
                    { "data": "Country", className: "text-center", },
                    { "data": "Industry", className: "text-center", },
                    { "data": "Hierarchy", className: "text-center", },
                    { "data": "Nationality", className: "text-center", },
                    { "data": "Company", className: "text-center", },
                    { "data": "Title", className: "text-center", },
                    { "data": "Phone", className: "text-center", },
                    {
                        "sClass": "text-center",
                        "data": "Institution",
                        "render": function (data, type, full, meta) {
                         
                            return '<input type="checkbox"  class="tablesingle" lay-ignore name="tablesingle"  value="" />'
    
                        },
                        "bSortable": false
                    },
                    {
                        "sClass": "text-center",
                        "data": "Contacttel",
                        "render": function (data, type, full, meta) {
    
                            return '<input type="checkbox"  class="tabledouble" lay-ignore name="tabledouble"  value="" />'
    
                        },
                        "bSortable": false
                    },
                ],
            });
    View Code

    json数据形式

    这样就生成一个 不带分页的 自适应,固定列的表格了

  • 相关阅读:
    洛谷P2505||bzoj2750 [HAOI2012]道路 && zkw线段树
    洛谷 P3462 [POI2007]ODW-Weights
    Xor-MST Codeforces
    101 to 010 Atcoder CODE FESTIVAL 2017 qual B D
    bzoj2125 最短路
    洛谷P1823 [COI2007] Patrik 音乐会的等待
    洛谷 P1121 环状最大两段子段和
    noip2017 逛公园
    洛谷 P1578 奶牛浴场
    洛谷 P1169||bzoj1057 [ZJOI2007]棋盘制作
  • 原文地址:https://www.cnblogs.com/GoTing/p/11654552.html
Copyright © 2020-2023  润新知