zoukankan      html  css  js  c++  java
  • 九天 ,datatables列和跳转页面的配置,Ajax请求

    使用datatables 隐藏列的方法与注意事项

    var AIGroup_table = $('#AIGroup_table').DataTable({
            bAutoWidth: false,
            sDom: DataTableDom,
            oLanguage: DataTableLanguage,
            iDisplayLength: 2,
            ordering: false,
            bLengthChange: true,
            bInfo: true,
            bPaginate: true,
            bProcessing: true,
            bServerSide: true,
            // bStateSave: true,  隐藏列,需要把这个去掉
            bFilter: false,
    
          //可以设置隐藏列,
              columnDefs: [
              { "visible": false, "targets": 2 },
    
            ],
    
            sAjaxSource: '/aiGroupData',
            fnServerData: getDataFromServerSideForDataTable,
            columns: [
                {
                     '10%',
                    mData: "id",
                    // bSortable: false,
                    sClass: "text-center",
                    // "visible": false,
                    mRender: function (data, type, row) {
                        return '<input type="checkbox"  name="business" style="opacity: 2; position: static; margin-top: 0px;" value="' + data + '">'
                    }
                },
                {
                     '10%',
                    mData: "name_s_30",
                    bSortable: false,
                    sClass: "text-center",
                    mRender: function (data, type, row) {
                        return data
                    }
                },
             .....
    
    
            ],
            //设置你的跳转页面的显示按键
            //AIGroup_table_paginate,是页面的div---ID标签
            fnDrawCallback: function (table) {
                $("#AIGroup_table_paginate").append("  到第 <input style='height:28px;line-height:28px;40px;' class='margin text-center' id='changePage' type='text'> 页  <a class='btn btn-default shiny' style='margin-bottom:5px' href='javascript:void(0);' id='dataTable-btn'>确认</a>");
                var oTable = $("#AIGroup_table").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    oTable.fnPageChange(redirectpage);
                });
            },
    
    
        });    

    Ajax请求可以发送两次

  • 相关阅读:
    奇妙的 CSS shapes(CSS图形)
    正确的缩写document。querySelector
    Ajax异步获取html数据中包含js方法无效的解决方法
    关于前端开发中的“收口”思想
    说说JSON和JSONP,也许你会豁然开朗
    Ajax 完整教程(转载)
    GitHub与Git指令入门
    Vue.js——60分钟组件快速入门(下篇)
    Vue.js——60分钟组件快速入门(上篇)
    自定义构造函数
  • 原文地址:https://www.cnblogs.com/huyangblog/p/9284648.html
Copyright © 2011-2022 走看看