zoukankan      html  css  js  c++  java
  • DataTable按钮,排序,单元格颜色

    function init_ceph_table(data, elementid) {
                var table = $('#' + elementid).DataTable(
                    {
                        data: data,
                        columns: [
                            {data: "host"},
                            {data: "disk_slot"},
                            {data: "disk_score"},
                            {data: "disk_media_error_count"},
                            {data: "disk_other_error_count"},
                            {data: "disk_pred_fail_count"},
                            {data: "disk_reallocated_sector_count"},
                            {data: "volume"},
                            {data: "osd_state"}
                        ],
                        "columnDefs": [{
                            "targets": 2,
                            "createdCell": function (td, cellData, rowData, row, col) {
                                if (cellData <100)
                                        $(td).css('color', 'red');
                            }
                        }],
                        buttons: [
                            {
                                extend: 'copy',
                                text: '复制'
                            },
                            {
                                extend: 'excel',
                                text: '导出excel'
                            }
                        ],
                        "order": [[2, "asc"]],
                        paging: false,
                        "language": {
                            "sProcessing": "处理中...",
                            "sLengthMenu": "显示 _MENU_ 项结果",
                            "sZeroRecords": "没有匹配结果",
                            "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                            "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
                            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                            "sInfoPostFix": "",
                            "sSearch": "搜索:",
                            "sUrl": "",
                            "sEmptyTable": "表中数据为空",
                            "sLoadingRecords": "载入中...",
                            "sInfoThousands": ",",
                            "oPaginate": {
                                "sFirst": "首页",
                                "sPrevious": "上页",
                                "sNext": "下页",
                                "sLast": "末页"
                            },
                            "oAria": {
                                "sSortAscending": ": 以升序排列此列",
                                "sSortDescending": ": 以降序排列此列"
                            }
                        }
                    }
                );
                table.buttons().container()
                    .appendTo($('.col-sm-6:eq(0)', table.table().container()));
            }
    

     

    表头在table中直接定义

    datatablejs

     1 <script type="text/javascript"
     2             src="static/vendors/datatable-bootstrap3/1.10.19/js/jquery.dataTables.min.js"></script>
     3     <script type="text/javascript"
     4             src="static/vendors/datatable-bootstrap3/1.10.19/js/dataTables.bootstrap.min.js"></script>
     5     <script type="text/javascript"
     6             src="static/vendors/datatable-bootstrap3/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
     7     <script type="text/javascript"
     8             src="static/vendors/datatable-bootstrap3/buttons/1.5.2/js/buttons.bootstrap.min.js"></script>
     9     <script type="text/javascript" src="static/vendors/datatable-bootstrap3/ajax/jszip/jszip.min.js"></script>
    10     <script type="text/javascript" src="static/vendors/datatable-bootstrap3/ajax/pdfmake/pdfmake.min.js"></script>
    11     <script type="text/javascript" src="static/vendors/datatable-bootstrap3/ajax/pdfmake/vfs_fonts.js"></script>
    12     <script type="text/javascript"
    13             src="static/vendors/datatable-bootstrap3/buttons/1.5.2/js/buttons.html5.min.js"></script>
    14     <script type="text/javascript"
    15             src="static/vendors/datatable-bootstrap3/buttons/1.5.2/js/buttons.print.min.js"></script>
    16     <script type="text/javascript"
    17             src="static/vendors/datatable-bootstrap3/buttons/1.5.2/js/buttons.colVis.min.js"></script>
  • 相关阅读:
    python实现二分查找算法例子代码
    Python实现计算圆周率π的值到任意位的方法示例
    什么是TWS耳机
    [置顶] 单例模式lua实现
    推荐五星级C语言学习网站
    poj2689 Prime Distance 有难度 埃拉托斯尼斯筛法的运用
    局域网
    pager-taglib分页处理的使用
    创建ListView的基本步骤
    求最大连续子数列和(只扫描一次数列)
  • 原文地址:https://www.cnblogs.com/QQQmadNULL/p/9961860.html
Copyright © 2011-2022 走看看