jquery 数据表零记录

Question

我正在使用带有服务器端过滤功能的 Datatables 1.10，一切正常，但我需要添加一些东西。目前我有这个代码。

$('#myTable').dataTable({
    "language":
    {
        "zeroRecords": "No records match",
    }
});

每当过滤后数据表没有值或数据表中 zeroRecords 时，我需要显示标签。

编辑

var oTable = $('#transactionHistoryDataTable').dataTable({

            "sPaginationType": "full_numbers",
            "bServerSide": true,
            "sAjaxSource": "api/Sitecore/Account/DataProviderAction",
            "bProcessing": true,
            "aoColumns": [
                            { "sName": "Date", "bSortable": false },
                            { "sName": "Name", "bSortable": false },
                            { "sName": "Activity", "bSortable": false },
            ],
            "sDom": '<"top">tip',

            "fnServerParams": function (aoData, fnCallback) {
                aoData.push({ "name": "ActivityParam", "value": $('#activityList').val() });
                aoData.push({ "name": "dateFrom", "value": $('#dateFrom').val() });
                aoData.push({ "name": "dateTo", "value": $('#dateTo').val() });
            },
            "language": {
                "loadingRecords": "Loading...",
                "zeroRecords": "<span class='label label-danger' >You have no activity for the selected Period</span>",
                "sEmptyTable": (function (oSettings, json) {
                    if ($('#transactionHistoryDataTable').find('tbody tr').length <= 1) {
                        $('#transactionHistoryDataTable').parent().hide();
                        $('div.filters > a, #tableheader').hide();
                        $('#message').text('There are no transactions to display.');
                    }       
                })
            },
            "drawCallback": function (settings) {
                if (settings._iRecordsTotal === 0)
                    $('#temp').show();
                else
                    $('#temp').hide()
            }
        });

html

<span class='label label-danger' style="display:none;" id="temp">No records found</span>

Answer 1

试试这个

HTML

<span class='label label-danger' style="display:none;" id="temp">No records found</span>

JS

var oTable =$('#myTable').DataTable({
    "language":
    {
        "zeroRecords": "No records match",
    }
}); 
oTable.on('draw', function () {                  
    if (oTable.settings()[0]._iRecordsTotal === 0)
       $('#temp').show();
    else
       $('#temp').hide()
});

注意：请参阅 DataTable 函数名称中的差异。 D是capital.Your版本支持这个大写D

如果你想用小 d 实现这个，那么使用这个

方法一

var oTable =$('#myTable').dataTable({
    "language":
    {
        "zeroRecords": "No records match",
    },
    "drawCallback": function (settings) {
        if (settings._iRecordsTotal === 0)
            $('#temp').show();
        else
            $('#temp').hide()
    }
 });

方法二

$('#myTable').on('draw.dt', function () {
    if (oTable.fnSettings()._iRecordsTotal === 0)
        $('#temp').show();
    else
        $('#temp').hide()
});

Answer 2

关于评论

it works thanks. but what if the label is outside the table?

如果你有

<span class='label label-danger' style="display:none;" id="temp">No records found</span>

在 table 之外，然后执行此操作

$('#transactionHistoryDataTable').on('draw.dt', function() {
    if ($(this).DataTable().data().length==0) {
        $("#temp").show();
    }    
})

将它放在你的 dataTable() 初始化之前
DataTable()"typecast"只是为了能用的更简单API

jquery 数据表零记录

jquery DataTables zeroRecords

jquery

datatables