jQuery Datatable - 我可以填充 div 吗？答案

【问题标题】：jQuery Datatable - can I fill div?jQuery Datatable - 我可以填充 div 吗？
【发布时间】：2026-02-24 13:50:01
【问题描述】：

我是 jQuery 数据表的新手，在 ajax 调用返回数据时遇到问题。如何使用数据集来填充表格？我需要填充div。其结构类似于表：

  <div id="wrap">
            <div class="drow">                
                <div class="dcol1">
                /*data*/
                </div>
                <div class="dcol2">
                /*data*/
                </div>                       
            </div>
            <div class="drow">                
                <div class="dcol1">
                /*data*/
                </div>
                <div class="dcol2">
                /*data*/
                </div>                       
            </div>
            <div class="drow">                
                <div class="dcol1">
                /*data*/
                </div>
                <div class="dcol2">
                /*data*/
                </div>                       
            </div>
    </div>

有什么想法吗？

【问题讨论】：

那么，基本上你想在<div> 结构而不是<table> 结构上使用dataTables？那永远不会发生。 dataTables 通过注入和删除 <tr> <td> 元素不断地操作 DOM，如果您不使用 AJAX 或未指定列，则需要存在 <tbody> 和 <thead>。表格元素的使用在插件中是硬编码的。

标签： javascript jquery ajax json datatable

【解决方案1】：

你可以像下面那样循环遍历 div，

$('#wrap .drow').each(function(){
    //populate the dcol1
    $(this).find('.dcol1').text(desiredData);
    //populate the dcol2
    $(this).find('.dcol2').text(desiredData);
});

需要查看响应 json 结构以进一步帮助。

现在，让你的json响应有如下结构，

{
  data: [
     {
        "dcol1": "some data1",
        "dcol2": "some data1"
     },
     {
        "dcol1": "some data2",
        "dcol2": "some data2"
     },
     .........
     {
        "dcol1": "some dataN",
        "dcol2": "some dataN"
     }         
  ]
}

所以，你可以像下面那样做，

var resp; //your json response
var dataArr = resp.data;
$('#wrap .drow').each(function(index){
     //populate the dcol1
     $(this).find('.dcol1').text(dataArr[index].dcol1);
     //populate the dcol2
     $(this).find('.dcol2').text(dataArr[index].dcol2);
 });

【讨论】：

【解决方案2】：

我不知道，你如何得到回应。但这里是，这可能对你有帮助。

$.ajax ({
	type : "GET",
	url : "your web service url",
	cache : false,
	success: function(res) {
					
		$.each(res,function(i, index) {
			 var responseObject = res[i];
			 $("#wrap").empty(); 
			 $("#wrap").append(' <div class="drow"> <div class="dcol1">responseObject.firstName</div><div class="dcol2">responseObject.firstName</div> </div> ');
		});
	   //it will loop through your response object and append data as per your format
	},
	error : function(e){
		alert("Something goes wrong");
	}
}); //ajax call ends

【讨论】：

【解决方案3】：

我已经为您的帮助树立了榜样，如果需要进一步的帮助，请检查并告诉我！

请注意，我使用 JSON 格式的返回数据。

JSON：

[{"drow":[{"dcol1":"dcol1_value","dcol2":"dcol2_value"}]},
{"drow":[{"dcol1":"dcol1_value","dcol2":"dcol2_value"}]}]

HTML：

<div id="wrap"></div>

JQ：

$(document).ready(function() {

var d= [{"drow":[{"dcol1":"dcol1_value","dcol2":"dcol2_value"}]},
    {"drow":[{"dcol1":"dcol1_value","dcol2":"dcol2_value"}]}];

    //loop over items of d
    $.each(d,function(index, item){
     drowDiv = '';
     dcol1Div = ''; 
     dcol2Div = '';
     $.each(item.drow,function(subIndex, subItem){
      dcol1Div = '<div class="dcol1">' + subItem.dcol1 + '</div>';
      dcol2Div = '<div class="dcol2">' + subItem.dcol2 + '</div>';
      drowDiv = '<div class="drow">' + dcol1Div + dcol2Div + '</div>';
     });

     $("#wrap").append(drowDiv);
    });
});

结果：

<div id="wrap">
        <div class="drow">
                <div class="dcol1">dcol1_value</div>
                <div class="dcol2">dcol2_value</div>
        </div>
        <div class="drow">
                <div class="dcol1">dcol1_value</div>
                <div class="dcol2">dcol2_value</div>
        </div>
</div>

这个东西也在jsFiddle活跃。

【讨论】：