datatable.js使用

Posted 2021-01-26 running-fly

$(document).ready(function () {

    var southtable = $("#southtable").DataTable({
        language: {
            url: ‘/lib/jquery.datatables/js/‘ + LANG + ‘.json‘
        },
        ordering: false,
        searching: false,
        processing: true,
        paging: false,
        columns:[
            {data:‘prose‘},
            {data:‘fightGroup‘},
            {data:‘p1Name‘},
            {data:‘p1Rid‘},
            {data:‘p2Name‘},
            {data:‘p2Rid‘},
            {data:‘winner1‘},
            {data:‘winner2‘},
            {data:‘winner3‘},
        ]
    });

    var northtable = $("#northtable").DataTable({
        language: {
            url: ‘/lib/jquery.datatables/js/‘ + LANG + ‘.json‘
        },
        ordering: false,
        searching: false,
        processing: true,
        paging: false,
        columns:[
            {data:‘prose‘},
            {data:‘fightGroup‘},
            {data:‘p1Name‘},
            {data:‘p1Rid‘},
            {data:‘p2Name‘},
            {data:‘p2Rid‘},
            {data:‘winner1‘},
            {data:‘winner2‘},
            {data:‘winner3‘},
        ]
    });

    function ajaxLoad(){
        southtable.clear().draw();
        northtable.clear().draw();
        $(".dataTables_processing").css("display", "block");
        window._PlatId = $("#PlatId").val();

        $.ajax({
            data: {
                _csrf: $("meta[name=‘csrf-token‘]").attr("content"),
                PlatId: $("#PlatId").val(),
                partition: $("#Partition").val(),
                time: $("#time").val(),
            },
            type:‘get‘,
            dataType:‘json‘
        }).done(function(data) {
            $(".dataTables_processing").css("display", "none");
            if(data.flag == 0 ||  data.info.data.length == 0){
                return false;
            }
            data.info.data.south.length == 0 || southtable.rows.add(data.info.data.south).draw();
            data.info.data.north.length == 0 || northtable.rows.add(data.info.data.north).draw();
        });
    }

    $(".search-form").submit(function () {
        ajaxLoad();

        return false;
    });

    southtable.on("init", function(){
        if($("#PlatId").val()!=‘‘&&$("#Partition").val()!=‘‘&&$("#time").val()!=‘‘){
            ajaxLoad();
        }
    });

});

    <div class="row">
        <div class="col-md-12">
            <div class="block-flat">
                <div class="header">
                    <h4><?= Yii::t(Yii::$app->controller->module->id, ‘查询结果‘) ?></h4>
                </div>
                <div class="southtable">
                    <div>
                        <table id="my_table" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 10%;"><?= Yii::t(Yii::$app->controller->module->id, ‘对局‘) ?></th>
                                    <th style="width: 10%;"><?= Yii::t(Yii::$app->controller->module->id, ‘角色a‘) ?></th>
                                    <th style="width: 10%;"><?= Yii::t(Yii::$app->controller->module->id, ‘rid‘) ?></th>
                                    <th style="width: 10%;"><?= Yii::t(Yii::$app->controller->module->id, ‘角色b‘) ?></th>
                                    <th style="width: 10%;"><?= Yii::t(Yii::$app->controller->module->id, ‘rid‘) ?></th>
                                    <th style="width: 15%;"><?= Yii::t(Yii::$app->controller->module->id, ‘首次击杀‘) ?></th>
                                    <th style="width: 15%;"><?= Yii::t(Yii::$app->controller->module->id, ‘剩余人数是否≤3‘) ?></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>