标签: datatables

我有一个数据(http://www.datatables.net),jQuery和Firefox的问题.

我有一个jQuery datatable(id="equipmentList"),上面有一个按钮:

<html:button styleId="deleteButton" property="delete" value="<%= buttonDelete %>" disabled="disabled" />

当我在数据表上排序一列时,我想禁用一个按钮(按钮deleteButton),所以我写了这段代码:

$('#equipmentList th').click( function() {
    hideButtonEditAndDelete();
});

function hideButtonEditAndDelete() {
    $("#modifyButton").attr("disabled", "disabled");
    $( "#deleteButton" ).attr("disabled", "disabled");

//fix for firefox

if($.browser.mozilla){
    $("#modifyButton").addClass('ui-state-disabled');
    $("#deleteButton").addClass('ui-state-disabled');
}}

一切顺利,直到排序结束,因为之后,我的按钮由jQuery启用; 或者是其他东西.所以我在排序顺序结束时寻找捕获事件来禁用我的按钮

有任何想法吗？

首先十分感谢

PS:抱歉英语不好

在网页上,我显示了网站用户创建的主题列表,仅列出了他们的标题.我可以使用TableTools导出到excel整个表,它工作正常.但是,有些列不是必需的,我想以某种方式隐藏它们中的一些.在一个完美的情况下,我想在用户点击"XLS"按钮时显示一个小弹出窗口,其中有几个带有相应表格标题的复选框和一个"导出"按钮.这样,用户只能选择导出所需的数据.有人可以指点我吗？

1. 是否可以在jQuery DataTables中将各列导出到Excel？
2. 是否可以导出以前使用fnSetColumnVis函数隐藏的列？

我正在为ajax调用生成会话超时的http 403.当使用jquery Datatables时,我可以fnServeData用来拦截这样的返回调用

"fnServerData": function ( sSource, aoData, fnCallback ) {
    $.getJSON( sSource, aoData, function (json) { 
            fnCallback(json);
        });
    }

这通常只是将结果转发到数据表 - 但是当我返回403时,我只是在我的Firebug控制台中得到http错误 - 我如何/在哪里可以检查403以便我可以显示对话框？

为什么我有这种类型的错误"TypeError:oColumn is undefined"使用jquery数据表我遵循了其文档中的所有指令.我不知道出了什么问题？

这是firebug的错误输出:

这是我的html表结构:

这是我使用的jquery代码:

<style type="text/css" title="currentStyle">
    @import "datatables/media/css/demo_table.css";
</style>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
            $('#products-result').dataTable( {
                "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
            } );
            $.extend( $.fn.dataTableExt.oStdClasses, {
            "sWrapper": "dataTables_wrapper form-inline"
        } );
    } );
</script>

由jquery生成的表:

$.ajax({
        url: 'get-products.php',
        type: 'post',
        datatype: 'json',
        data: { category: $('.category').val().trim(), keyword: $('.keyword').val().trim() },
        beforeSend: fnLoadStart,
        complete: fnLoadStop,
        success: function(data){
            var toAppend = '';

            toAppend += '<thead><tr><th>Name</th><th>Image</th><th>Price</th><th>Shipping</th><th>Weight</th><th>Dimension</th><th>ASIN</th><th>Description</th><th>Reviews</th><th>Category</th></tr></thead>';
            toAppend += '<tbody>';

            if(typeof data === "object"){
                for(var i=0;i<data.length;i++){

                    var price = '';
                    if(data[i]['price'] === null){
                        price = …

我试图渲染大约2500行禁用排序和"bDeferRender":true.它需要大约40秒的铬(v27).我正在使用Datatables 1.9和jquery 2.有什么建议吗？

数据表的数据表settings:

var oSettings = {
    'bDestroy': true,
    "bInfo": true,
    "bProcessing": true,
    "bDeferRender": true,
    'iDisplayLength': 10,
    'sPaginationType': 'full_numbers',
    'sDom': '<"top"i> T<"clear">lfrtip',
    'sPageButtonActive': "paginate_active",
    'sPageButtonStaticDisabled': "paginate_button",
    "oLanguage": {
        "sSearch": "Futher Filter Search results:",
        "sInfo": "Got a total of _TOTAL_ results to show (_START_ to _END_)",
        "sLengthMenu": 'Show <select>' +
                '<option value="5">5</option>' +
                '<option value="10">10</option>' +
                '<option value="15">15</option>' +
                '<option value="20">20</option>' +
                '<option value="25">25</option>' +
                '</select> results'
    },
    "bSort": false
};

我在用Jquery Datatable.我希望第一列包含标题和带复选框的行,并且应该选中标题复选框和剩余行的复选框.我有以下实施.

数据表属性

  "aoColumns": [{ "sTitle": "<input type='checkbox' id='selectall' onclick='toggleChecks(this);' ></input>", "mDataProp": null, "sWidth": "20px", "sDefaultContent": "<input type='checkbox' ></input>", "bSortable": false },null,null,null,null,null,null]

数据表行

<td><input type="checkbox' class="case"></input></td>

Javascript功能

  function toggleChecks(obj)
    {
        $('.case').prop('checked', obj.checked);
    }

我在单页时工作正常.但是当我进行分页时,其他页面的复选框仍未选中.如何实现这一点,使所有复选框的行为一致.请协助.

所以问题已在这里提出,但解决方案对我不起作用(我可能做错了).我想按字母顺序("类型":"自然")对表格进行排序,但我希望空单元格位于底部(对于desc和asc).

我尝试了fbas给出的先前解决方案:

jQuery.fn.dataTableExt.oSort['mystring-asc'] = function(x,y) {
    var retVal;
    x = $.trim(x);
    y = $.trim(y);

    if (x==y) retVal= 0;
    else if (x == "" || x == " ") retVal=  1;
    else if (y == "" || y == " ") retVal=  -1;
    else if (x > y) retVal=  1;
    else retVal = -1;  // <- this was missing in version 1

    return retVal;
}
jQuery.fn.dataTableExt.oSort['mystring-desc'] = function(y,x) {
    var retVal;
    x = $.trim(x);
    y = $.trim(y);

    if (x==y) retVal= 0; …

我已经在Datatable API中看到了使用Drop down进行特定列过滤的这种可能性.

参考:https://datatables.net/examples/api/multi_filter_select.html

但对我来说,它不同,我需要做同样的多选下拉菜单.因此,数据表应相应地显示结果.

因此,在上述链接中,我无法选择"东京和伦敦"两个办事处.我用多选插件(http://harvesthq.github.io/chosen/)实现了编码,但数据表只有一个选项.

那可能吗？如果是这样,请你帮忙.

当我进一步检查调试时,我发现它确实传递了json数据,这里是调试的屏幕截图.

演示PLNKR

<html>
<head>
  <link 
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
  <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body>
  <table id="myDataTable" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>primaryGenreName</th>
        <th>country</th>    
      </tr>
    </thead>
    <tbody>
    </tbody>
</body>
</html>

我有2张桌子，其中一张有我的产品数据，例如名称和条形码。另一个是空的，我想通过jQuery 将产品的表（仅选定的行）复制到第二个表中。

<table id="exampleTable1" style="max-width:50%;">
    <thead>
        <tr>
            <th>bar-code</th>
            <th>product name</th>
        </tr>
    </thead>
    <tbody>
        <tr role="row" class="odd selected">
            <td class="sorting_1">545333456</td>
            <td>Galaxy S9</td>
        </tr>
        <tr role="row" class="even selected">
            <td class="sorting_1">876543</td>
            <td>Galaxy S6</td>
        </tr>
        <tr role="row" class="odd">
            <td class="sorting_1">407654</td>
            <td>SD 64G </td>
        </tr>
        <tr role="row" class="even selected">
            <td class="sorting_1">876543</td>
            <td>Galaxy S5</td>
        <tr role="row" class="odd">
            <td class="sorting_1">407654</td>
            <td>Iphone 7 </td>
        </tr>
    </tbody>
</table>

我的第二张桌子：

<table id="exampleTable2" style="max-width:50%;">
    <thead>
        <tr>
            <th>bar-code</th>
            <th>product name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        </tr>
        <tr>
        </tr>
    </tbody>
</table>

<button …