前端实现表格分页，排序，全局模糊搜索

环境：

        Python flask框架下的 html页面 

目标：

        1. 实现表格分页，排序，全局模糊搜索

html

<table id="odpsColumnsDetails" class="table table-bordered  "> </table>

js部分

重点在 DataTable，这个是 jquery.dataTables.min.js 中的，所以要引入这个js

可以参考：https://datatables.net/examples/data_sources/js_array.html  官方最靠谱

$('#odpsColumnsDetails').DataTable({
                        data: data,
                        columns: columns
                    }
                )

data数据格式为数组 ：[ [ ], [ ], [ ], [ ] ] 

css部分

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

最后效果（这里把其中一部分英文替换成了中文）

 整个页面（继承主页面base而来，看官们主要看DataTable的实现即可）：

        数据通过ajax获取

{% extends 'base.html' %}

{% block content %}

    <!-- End Breadcrumb-->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header"><i class="fa fa-table"></i> 离线同步任务明细(点击源多出字段可查看具体字段)</div>
                <div class="card-body">
                    <div class="table-responsive">                  
                        <table id="odpsColumnsDetails" class="table table-bordered  ">

                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div><!-- End Row-->
{% endblock %}

{% block script %}
    <script src="../static/plugins/bootstrap-datatable/js/jquery.dataTables.min.js"></script>
    <script src="../static/plugins/bootstrap-datatable/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <script>


        window.onload = function () {
            function DataIndicatorInfo(name) {
                this.name = name
            }

            DataIndicatorInfo.prototype = {
                init: function () {
                    console.log('start to init...')
                    this.showOdpSyncTaskColumns();
                },
                showOdpSyncTaskColumns: function () {

                    let taskColumnsInfo = getOdpSyncTaskColumns()['data'];
                    showSyncTaskColumnsInfo(taskColumnsInfo);         
                }

            };


            function showSyncTaskColumnsInfo(data) {
                let columns = [{
                    field: 'dbname',
                    title: '数据源库名',
                    {#sortable: true,#}
                    width: '10%'
                }, {
                    field: 'tablename',
                    title: '数据源表名',
                    {#sortable: true,#}
                    width: '15%'
                },
                    {
                        field: 'dtsdbname',
                        title: '目标库名',
                        {#sortable: true,#}
                        width: '12%'
                    },
                    {
                        field: 'dtsTableName',
                        title: '目标表名',
                        {#sortable: true,#}
                        width: '10%'
                    }, {
                        field: 'diffcolumns',
                        title: '源多出字段',
                        {#sortable: true,#}
                        width: '10%'
                    }, {
                        field: 'diffcolumnsNum',
                        title: '源多出数量',
                        {#sortable: true,#}
                        width: '10%'
                    }, {
                        field: 'instanceid',
                        title: '实例id',
                        {#sortable: true,#}
                        width: '15%'
                    }, {
                        field: 'ownerName',
                        title: '负责人',
                        {#sortable: true,#}
                        width: '8%'
                    }, {
                        field: 'dt_day',
                        title: '更新时间',
                        {#sortable: true,#}
                        width: '10%'
                    }];
                $('#odpsColumnsDetails').DataTable({
                        data: data,
                        columns: columns
                    }
                )

            }

            function getOdpSyncTaskColumns() {
                let columnsInfo = {};
                $.ajax({
                    url: 'get_odps_columns_info',
                    type: 'post',
                    async: false,
                    dataType: "json",
                    success: function (data) {
                        columnsInfo = data;
                    },
                    error: function () {
                        alert('error')
                    }
                });
                return columnsInfo
            }


            let dataIndicatorInfo = new DataIndicatorInfo('dataIndicatorInfo');
            dataIndicatorInfo.init();
        }
    </script>
{% endblock %}
{% block style %}
    <style>

        .table {
            table-layout: fixed !important;
        }

        .table tbody tr td {
            overflow: hidden;
            text-overflow: ellipsis;
        {# word-wrap: break-word;#} white-space: nowrap;
        {#word-break:break-all;#} font-size: 13px;
        }

        .form-control-sm {
            height: calc(1.5em + .5rem + 2px);
            padding: .15rem .5rem;
            font-size: .875rem;
            line-height: 1.5;
            border-radius: .2rem;
        }

        .form-control {
            border: 1px solid rgba(66, 59, 116, 0.22);
            background-color: #ffffff;
            color: #4e4e4e;
        }

        .tooltip-inner {
            background: green !important;
            text-align: left !important;
        / / 字体左对齐 color: #363636 !important;
        / / 字体颜色 border: 1 px solid #dedede;
        / / 添加boder width: 400 px !important;
            max-width: 800px !important;
        / / 修改宽度
        }

        .tooltip-arrow {
            opacity: 0;
        / / 三角形透明
        }

        .dataTables_wrapper .row {
            align-items: center;
            margin-bottom: 10px;
        }

        .dataTables_wrapper .row label {
            margin-bottom: 0;
            display: flex;
            align-items: center;
            {#justify-content: space-between;#}
            {#flex-basis: 48%;#}
            {#border: 1px solid #000;#}

        }

        .dataTables_wrapper .dataTables_length select {
            width: 75px;
            display: inline-block;
            margin: 0 4px;
        }


    </style>
{% endblock %}

style部分是因为 该样式和项目中其他样式冲突 加进去的，可以不用看