模态窗口 嵌入 datatable 作为弹出框

引入

<script src="js/jquery-3.2.1.min.js "></script>

<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<%--弹出层模态窗口&times; 为了设置模态窗口的长度和宽度,如果能不冲突引入bootstrap.mini.css
则可以class="modal-dialog modal-lg"添加modal-sm来使用3种宽度 modal-lg（最大） 默认（中）modal-sm（最小）
这里是自己写的css .modal-lg{width:900px;}
--%>
<div class="modal fade modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header" style="border-bottom:0;margin-bottom: 0;padding-bottom: 0">
            <button type="button" class="btn btn-primary radius showss" data-dismiss="modal" aria-hidden="true" style="float: right;position: relative;top: 10px">
                    关闭
            </button>
            <h4 class="modal-title" id="myModalLabel" style="font-weight:bold">
               推送失败详情
            </h4>
         </div>
         <div class="modal-body" style="padding: 10px">
                <table id="tabledatadetail" class="display table-striped table-bordered table-hover table-condensed dataTable no-footer" style="width:100%"></table>
         </div>
         <%--<div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary">
               提交更改
            </button>
         </div>--%>
      </div>
   </div>
</div>

function hide() {
    $("#myModal").modal("hide"); //隐藏模态窗口
}
//
function show() {
    var $box = $('#myModal');
    $box.css({
        // position: 'absolute',
        //设置弹出层距离左边的位置
        left: ($("body").width() - $box.width()) / 2 + 250 + "px",
        //设置弹出层距离上面的位置
        top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + 35 + "px",
        display: "block"
    });

    $("#myModal").show();  //点击模态窗口遮罩层会关闭模态窗口的bug
    $('#myModal').modal({
        backdrop: 'static',
        show: false
    });

    $("#myModal").modal("show");//显示模态窗口
}

columnDefs: [
    {
        targets: 0,
        "orderable": false,
    },
    {
        targets: 1,
        "orderable": false,
    },
    {
        targets: 2,
        "orderable": false,
    },
    {
        targets: 3,
        "orderable": false,
        /*render: function (a, b, c, d) {
            return "<a onclick=show('"+c.pushDate+"')>"+a+"</a>";
        }*/
    },
    {
        targets: 4,
        "orderable": false,
    }
],
"searching": false,//取消搜索
// aaSorting:[[1,"desc"]] ,    //设置排序的初始列和排序规则，

排序列的设置

columnDefs: [
    { "bSortable": false, "aTargets": [ 0,1,2,3,4 ] }, //指定不参与排序的列,配合order:[]一起使用,使所有列都不参与排序
    /*{
        targets: 0,
        "orderable": false,   //多写几遍,使 0 1 2 3 4 都不参与排序
    },
    {
        targets: 1,
        "orderable": false,
    },
    {
        targets: 2,
        "orderable": false,
    },
    {
        targets: 3,
        "orderable": false,
        /!*render: function (a, b, c, d) {
            return "<a onclick=show('"+c.pushDate+"')>"+a+"</a>";
        }*!/
    },
    {
        targets: 4,
        "orderable": false,
    }*/
],
order:[],