zoukankan      html  css  js  c++  java
  • 使用DataTables插件与后台对接表格

                function getResults(){
                    var callResults = $.ajax({
                        url: "。。。。", //接口url
                        type: "GET", //请求方式
                        dataType: "json",
                        headers: {
                            Accept: "application/json;odata=verbose"
                        },
                        success: function (resp) { //请求成功后要做的事情
                            $('#loadicon').hide(); //这里是隐藏loading图
                            $('#main').show(); //显示表格
                        }
                    });
             
                    callResults.done(function (data, textStatus, jqXHR){
                        $('#example').DataTable( {
                            "bDestroy": true,
                            "bProcessing": true,
                            "aaData": data.list, //后台传过来的数据里面的要显示的数据的名称(数组名称)
                            "aoColumns": [ //要显示数据的每一列
                                { "mData": "project_name" },
                                { "mData": "process_status" },
                                { "mData": "create_time" },
                                { "mData": "need_feedback_time" },
                                { "mData": "real_feedback_time"}
                            ],
                            "language": { //原先显示都是英文,改成中文
                                "lengthMenu": "每页显示 _MENU_ 条",
                                "paginate": {
                                    "first":      "第一页",
                                    "last":       "最后一页",
                                    "next":       "下一页",
                                    "previous":   "上一页"
                                },
                                "emptyTable":     "没有数据",
                                "info":           "显示 _START_ 到 _END_ 共 _TOTAL_ 条数据",
                                "infoEmpty":      "显示 0 到 0 共 0 条数据",
                                "infoPostFix":    "",
                                "thousands":      ",",
                                "loadingRecords": "没有数据",
                                "processing":     "处理中...",
                                "search":         "查找:",
                                "zeroRecords":    "没有匹配的数据",
                                "infoFiltered": "(过滤总件数 _MAX_ 条)"
                            },
                            "ordering": true, //有排序功能
                            "order": [[ 2, "desc" ]], //刚开始的时候按第三列降序排列
                            "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ], //一页显示多少条记录
                            "fnRowCallback": function( nRow, aData, iDisplayIndex ) {//实现行点击,并且能跳转
                                $(nRow).on( 'click', function () {
                                    // logger.e(JSON.stringify(aData));
                                    // logger.e(JSON.stringify(nRow));
                                    // logger.e(iDisplayIndex);
                                    $(this).toggleClass('selected');
                                    let processId=aData.process_id;
                                    window.location.href = "result.html?process=" + processId;
                                });
                            }
                        } );
                    });
             
                    callResults.fail(function (jqXHR, textStatus, errorThrown){
                        alertDD("表格发生错误: " + jqXHR.responseText);
                    });
                }
  • 相关阅读:
    Jedis入门
    redis的安装
    redis概述
    020 SpringMVC返回Json
    019 数据绑定流程分析(校验)
    018 数据绑定流程分析(包括数据转换与格式化)
    maven添加插件,与maven打包
    定制库到maven库
    maven仓库
    Maven启动代理访问
  • 原文地址:https://www.cnblogs.com/biubiuxixiya/p/8134658.html
Copyright © 2011-2022 走看看