小编dav*_*rad的帖子

这是图像(我要做的)

如何添加页脚到弹出窗口并使内容可滚动？使用Twitter bootstrap 3

我正在使用DataTable 1.10和TableTools 2.2.1.

鉴于以下剪辑,我想禁用/启用编辑按钮.

var myTable = $("#myTable ").DataTable({
tableTools : {
    "aButtons" : [ {
        "sExtends" : "text",
        "sButtonText" : "Edit",
        "fnClick" : function(nButton, oConfig, oFlash) {
            /* some stuff */    
        }
    }]
  }
})

是否有可能在运行时执行此操作？

非常感谢

我在订购包含HTML的列时遇到问题.在1.10的文档中说明,默认情况下应该这样做,但事实并非如此.然后我查看了1.10的新功能,并看到如果同一列中的每个TD元素都有"数据顺序"属性,则可以通过所述属性进行排序.完善!问题是,我无法让它发挥作用.

奇怪的是,当页面是静态时,它们具有此示例的示例正在按预期工作,但不是在动态加载数据和表时.

我正在使用以下选项和更改来启动表以添加属性.失效是为了告诉Datatables它需要重绘它(我看到它需要在某处):

"createdRow": function ( row, data, index ) {
                if ( data[6] ) {
                    cell = $('td', row).eq(6);
                    value = cell.text();
                    if(value == "Ej fakturerad") {
                        cell.attr('data-order', 1);
                    }
                    else if(value == "Nej") {
                        cell.attr('data-order', 2);
                    }
                    else if(value == "Kredit") {
                        cell.attr('data-order', 3);
                    }
                    else if(value == "Ja") {
                        cell.attr('data-order', 4);
                    }
                }
                oTable
                    .row( index )
                    .invalidate()
                    .draw();
            },

我正在使用Laravel项目中Chumper/datatables的composer包实现这个DataTable,这意味着数据源是Ajax,并使用服务器端处理.

提前致谢!

我 在我的本地主机(wamp服务器)中使用 http://datatables.net/extensions/tabletools/.它工作正常,但当我在我的在线服务器上放置相同的代码时,它无法正常工作.

我正在使用所有最新版本的数据表

tableTools: {
    "sSwfPath": "https://datatables.net/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
    "sRowSelect": "os",
    "sRowSelector": 'td:first-child',
    // "aButtons": [ "copy", "csv", "xls","pdf","print","select_all", "select_none" ]
    "aButtons": [
        "copy",
        "print", {
            "sExtends": "collection",
            "sButtonText": "Save", // button name 
            // "aButtons":    [ "csv", "xls", "pdf" ]
            "aButtons": [
                "csv",
                "xls", {
                    "sExtends": "pdf",
                    "sPdfOrientation": "landscape",
                    "sPdfMessage": "List of product."
                },
                "print"
            ]
        }
    ]
}    

首先没有点击copy,pdf,csv,xls按钮.因此,我教我的路径或瑞士法郎不工作,因此我用在线链接替换了链接.因此,现在我点击了,但是当我点击"复制"按钮时,它会给我一条消息......但是当我在记事本中过去时,它给了我"空白".我的pdf,csv,xlsx也没有用.只有Print才能完美运行.请告诉我这是什么问题,因为我的localhost一切正常.它在我的在线服务器中创建问题.

嗨,我有以下表格设计.我不希望第一列和最后一列可以排序.我已经相应地设置了.但是图标asc仍然出现在第一列而不是最后一列.但是当我尝试对第二列进行排序时,它就会消失.

<table id="userTable" name='userTable' class="table table-striped table-bordered bootstrap-datatable " data-column-defs='[{"sortable": false, "targets": [0,3]}]' style='table-layout: fixed;'>
  <thead>
    <tr>
      <th class="no-sort" style='width: 10%;'>No.</th>
      <th style='width: 25%;'>First Name</th>
      <th style='width: 20%;'>last Name</th>
      <th style='width: 25%;'>Details</th>
    </tr>
  </thead>
</table>

我有一个页面，该页面包含三个引导程序选项卡，每个选项卡中都有一个数据表。第一个选项卡中的数据表工作正常。但是，第二个选项卡中的数据表为半角，我不知道为什么。也没有适用于它的CSS。

这是第一个标签页的屏幕截图（工作正常）

和第二个标签（数据表为半角宽度）

我的代码：

$('#companies').DataTable({ //table in tab 1 (works fine)
        responsive: true
});


$('#companies2').DataTable({ //table in tab 2
        responsive: true
});

我的html：

<!-- tab start -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Tabs</h1>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
                <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            </ul>

            <!-- tab sections -->
            <div class="tab-content">
                <div class="tab-pane active" id="tab1">
                    <table id="companies" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Company ID</th>
                                <th>Company Name</th>
                                <th>Status</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead> …

这是我的数据表。

我似乎无法控制任何列的宽度：

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": 'ajax/data/arrays.txt'
    } );

我在这里尝试了各种方法：

$('#example').dataTable( {
  "autoWidth": false
} );

而在这里：

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

没有成功。谁能建议我如何手动控制某些单独列的宽度？我希望可以使用数据表中的现有方法来完成此操作。

注意：如果有机会，我会发布一个小提琴。 在这里摆弄 -并不完全相同，但是如果我的理解是正确的，那么我应该在这里控制列宽：

var table = $('#example').DataTable();

我正在学习Google Chart API,并找到了我可以使用的以下代码,但如何指定我自己的颜色,我在Google网站上搜索,它说使用chco,但在这种情况下,如何使用"chco:FFC6A5 | FFFF42 | DEF3BD | 00A5C6"在这里,我在哪里指定？

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addRows(4);
        data.setValue(0, 0, '2004');
        data.setValue(0, 1, 1000);
        data.setValue(0, 2, 400);
        data.setValue(1, 0, '2005');
        data.setValue(1, 1, 1170);
        data.setValue(1, 2, 460);
        data.setValue(2, 0, '2006');
        data.setValue(2, 1, 660);
        data.setValue(2, 2, 1120);
        data.setValue(3, 0, '2007');
        data.setValue(3, 1, 1030);
        data.setValue(3, 2, 540);

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: …

我尝试使用两个可滚动列(使用bootstrap 2.2)进行布局.现在它似乎工作,如果我删除"!doctype html"标签,所以我假设我的布局不符合规范.有人可以告诉我我做错了什么或如何更容易找到我的错误？

<!doctype html> <!-- scrolling only works without the doctype -->
<html xmlns="http://www.w3.org/1999/html">

<head>

    <link rel="stylesheet" media="screen" href="bootstrap.min.css">

    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>

    <style type="text/css">
        body, html {
            height: 100%;
            overflow: hidden;
        }

        .navbar-inner {
            height: 40px;
        }

        .scrollable {
            height: 100%;
            overflow: auto;
        }

        .max-height {
            height: 100%;
        }

        .no-overflow {
            overflow: hidden;
        }

        .pad40-top {
            padding-top: 40px;
        }
    </style>
</head>

<body>

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse collapse">
                <a class="brand" href="#">Title</a>
                <ul …

我找到了一个关于bootstrap网格的教程,但它是用bootstrap1.x编写的.现在我想使用bootstrap3来达到同样的效果.该文档说使用.img-thumbnail而不是.media-grid,但它似乎仍无效.我想要的是这样的:

1.x版本是:

<ul class="media-grid">
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />

                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/290x200" />
                </a>
            </li>

    <!-- row of 4 thumbnails -->
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://placehold.it/210x140" />
                </a>
            </li>       

        </ul><!-- end media-grid -->