代码之家  ›  专栏  ›  技术社区  ›  Engr. Arda

是否有设置来停止DataTable中“表中无可用数据”的显示?

  •  7
  • Engr. Arda  · 技术社区  · 7 年前

    最初,我的表没有数据,我得到了“表中没有可用数据”,这是预期的功能。

    我希望不创建任何文本或行,因为我将根据用户操作通过Ajax填充表。

    是否有停止表中此行显示的设置?我好像找不到。此代码正常工作,但第一行显示“表中无可用数据”。这是jQuery代码:

    $.ajax({
        type: 'GET',
        url: '/Home/postInformationofConferenceTitle',
        dataType: "JSON",
        success: function (data) {
    
            $.post("/Home/selectRooms", { xtitle: data.xglobalTitle }, function (data) {
    
                var ndx = 0;
                $.each(data.xroom_name, function (key, value) {
    
                    var Xroom_name = data.xroom_name[ndx];
                    var Xroom_plan = data.xroom_plan[ndx];
    
                    var column =
                      ('<tr>' +
                        '<td>' +
                        '<div class="img-container">' +
                        '<img src="../../assets/img/room-plan/' + Xroom_plan + '" alt="..." id="imgsrc">' +
                        '</div>' +
                        '</td>' +
                        '<td id="imgname">' + Xroom_name + '</td>' +
                        '<td class="text-right">' +
                        '<a href="#" class="btn btn-simple btn-warning btn-icon edit" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>' +
                        '<a href="#" class="btn btn-simple btn-danger btn-icon remove" ><i class="fa fa-times"></i></a>' +
                        '</td>' +
                        '</tr>');
    
                    document.getElementById('colmn').innerHTML = document.getElementById('colmn').innerHTML + column;
    
                    ndx++;
    
                });
    
            });
    
        }
    })
    
    4 回复  |  直到 7 年前
        1
  •  10
  •   G_S    7 年前

    我想您可能正在查看datatables的语言设置。

    language : {
            "zeroRecords": " "             
        },
    

    (请注意“.”之间的空格。(这是一种黑客行为,但现在发现它很有用。)

    $(document).ready(function () {
    
    	var serverData = [
    	]
    	var table = $('#example').DataTable({
       language : {
                "zeroRecords": " "             
            },
    		data: serverData,
    		columns: [
    			{ data: "name" },
    			{ data: "age" },
    			{ data: "isActive" },
    			{ data: "friends" },
    		],
    		'columnDefs': [{
    			'targets': 2,
    			'render': function (data, type, full, meta) {
    				let checked = ''
    				if (data) {
    					return '<input type="checkbox" checked / >';
    				}
    				else {
    					return '<input type="checkbox"  / >';
    				}
    				return data;
    			}
    		},
    		{
    			'targets': 3,
    			"render": function (data, type, full, meta) {
    				var selectInitial = "<select>";
            var selectClosing = "</select>";
            var options = '';
    				$.each(data, function (key, value) {
    					options = options+"<option value="+value.id+">"+value.name+"</option>";
    				});
    				return selectInitial+options+selectClosing;
    			}
    		}
    		],
    	});
    
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script><link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.css'>
    
    <table id="example" class="display" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>isActive</th>
                    <th>friends</th>
                     
                </tr>
            </thead>
        </table>
        2
  •  3
  •   Миха Makarychev    6 年前

    这对我有用。

    var someTableDT = $("#some-table").on("draw.dt", function () {
        $(this).find(".dataTables_empty").parents('tbody').empty();
    }).DataTable(/*init object*/);
    
        3
  •  1
  •   Salman Sarfraz Nausherwan Aslam    4 年前

    以下内容对我有用:

    $(document).ready(function () {
            $("#TABLE_ID").DataTable();      
            $(".dataTables_empty").empty();
        });
    
        4
  •  0
  •   fcunited    3 年前

    下一个CSS让我完全隐藏了该块(不仅仅是删除文本):

    .dataTables_empty
    {
        display:none;
    }
    
    推荐文章