zoukankan      html  css  js  c++  java
  • datatable.js使用

    $(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=" 10%;"><?= Yii::t(Yii::$app->controller->module->id, '对局') ?></th>
                                        <th style=" 10%;"><?= Yii::t(Yii::$app->controller->module->id, '角色a') ?></th>
                                        <th style=" 10%;"><?= Yii::t(Yii::$app->controller->module->id, 'rid') ?></th>
                                        <th style=" 10%;"><?= Yii::t(Yii::$app->controller->module->id, '角色b') ?></th>
                                        <th style=" 10%;"><?= Yii::t(Yii::$app->controller->module->id, 'rid') ?></th>
                                        <th style=" 15%;"><?= Yii::t(Yii::$app->controller->module->id, '首次击杀') ?></th>
                                        <th style=" 15%;"><?= Yii::t(Yii::$app->controller->module->id, '剩余人数是否≤3') ?></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  • 相关阅读:
    数据报表开发技巧:自动为数据报表添加【小计】、【总计】行
    使用Xamarin开发手机聊天程序 -- 基础篇(大量图文讲解 step by step,附源码下载)
    如何让服务端同时支持WebSocket和SSL加密的WebSocket(即同时支持ws和wss)?
    Unity3D 预备知识:C#与Lua相互调用
    进程守护系统,你懂吗?
    Xamarin 跨移动端开发系列(01) -- 搭建环境、编译、调试、部署、运行
    程序员与禅的对话录
    技术人的慰藉
    我的作品
    自动升级系统的设计与实现(续2) -- 增加断点续传功能 (附最新源码)
  • 原文地址:https://www.cnblogs.com/zxqblogrecord/p/10116958.html
Copyright © 2011-2022 走看看