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="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>

原文地址:https://www.cnblogs.com/zxqblogrecord/p/10116958.html

时间: 2024-10-16 10:30:05

datatable.js使用的相关文章

datatable.js(03)列子

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../js/jQueryUI/jquery-ui.min.css" /> <l

datatable.js(04)列子

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

jquery.dataTable.js 基础配置记录

$("#mainTable").dataTable({ /* * sErrMode * 错误信息显示方式 * 分别为alert和throw,默认为alert */ "sErrMode": "throw", /* * sDom * 布局方式,可以自定义,布局项,也可以调换布局顺序 * 详解: * <> 表示一个闭合的div 例如:<> = <div></div> * <"类名称&quo

jquery.dataTable.js 基础配置

$(document).ready(function () { $('#dataTables-example').DataTable({ responsive: true, "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "bFilter": true, //过滤功能 "bSort": true, //排序功能 "bInfo": t

Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

版本: django:2.1.7 python:3.7 Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如下: paginator = Paginator(stat_list, numtmp) try: flight_stats = paginator.page(1) except PageNotAnInteger: flight_stats =

分享在MVC3.0中使用jQuery DataTable 插件

前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发

jqurey datatable tableTools 自定义button元素 以及按钮自事件

版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSwfPath": "~/Resources/Scripts/plugins/DataTables/swf/copy_csv_xls_pdf.swf" "sRowSelect": "multi", "aButtons": [

jquery dataTable汉化(插件形式)

1.jquery dataTable.js 官网:http://datatables.net/ 中文:http://dt.thxopen.com/ 2.汉化提示信息(放到xx.js中,引入即可) 注:只测试过DataTables-1.10.5版本 /*汉化by lxf qq1140215489*/ (function(){ var oLanguage={ "oAria": { "sSortAscending": ": 升序排列", "s

layUI之DataTable组件V1.0(父子表管理传值/数据表格与select&amp;laydate结合等)

目录 layUI之DataTable数据表格组件V1.0 概述 一.下载与引用 二.组件功能介绍 三.父表格渲染 四.子表弹出渲染 五.父表增/删/改/查 六.其他特色功能 七.最后说点啥 layUI之DataTable数据表格组件V1.0 概述 ? 公司项目中对于表格操作的要求较多,比如"父子表格关联进行数据传递"."表格中使用select组件"."表格中使用日期控件"."表格输入格式验证"."数据表格新增(删除)