如何使用从 Spring MVC 发回的 JSON 对象填充 jQuery 数据表的行？

Posted 2023-05-07

【中文标题】如何使用从 Spring MVC 发回的 JSON 对象填充 jQuery 数据表的行？

【英文标题】：How to populate rows of jQuery datatable with JSON object sent back from Spring MVC?

【发布时间】：2012-10-02 05:35:09

【问题描述】：

我有一个 Java (Spring MVC) 后端，它返回 POJOs 作为 JSON 对象，如下所示：

@RequestMapping(value = "/getWidgetsByType", method = RequestMethod.POST)
public @ResponseBody List<WidgetVO> getWidgetsByType(@RequestParam("type") String type)

    return widgetDAO.getWidgetsByType(token);
   

public class WidgetVO 
    private String type;
    private String name;
    private boolean isAwesome;

    // Getters and setters, etc.

在前端，我尝试从 jQuery $.getJSON 调用内部调用 /getWidgetsByType，然后使用从该调用返回的 JSON 结果进行填充datatable。具体来说，我希望数据表出现在页面加载时当前为空的<div> 标记内，如下所示：

<div id="#table-to-display"></div>

var t = getTypeFromDOM();

$.getJSON(
    url: "/getWidgetsByType",
    data: 
        type: t
    ,
    success: function() 
        // How do I extract the JSON version of the List<WidgetVO>'s coming
        // back from the server and use them to populate the table?
        $("#table-to-display").datatable();
    
);

我希望datatable 包含与WidgetVO 的字段 相同的列（类型、名称、isAwesome），都与String值（无渲染器等）。

在此先感谢您的帮助！

【参考方案1】：

1.控制器

@RequestMapping(value = "/json", method = RequestMethod.GET)
public
@ResponseBody
String listUsersJson(ModelMap model) throws JSONException 
    int no=1;
    JSONArray userArray = new JSONArray();
    for (TileType tT: tD.getAll())   
        String n=Integer.toString(no);
        String id=Integer.toString(tT.getTileTypeId());          
        String[] value =
        n,
         tT.getTileTypeName(),
         tT.getTileTypeDensity()         
        ;   
        userArray.put(value);
        no++;
    
    String x=userArray.toString();
    String replace1=x.replace("", "[");
    String replace2=replace1.replace("","]");
    String replace3=replace2.replace(":",",");
   return ("\"aaData\":"+replace3+"");        

2.道

 @Override
public List<TileType> getAll() 
    Session session=HibernateUtil.getSessionFactory().openSession();
    List<TileType>list=new ArrayList<TileType>();
    try
    Query query=session.createQuery("from TileType T order by T.tileTypeId DESC");
    list=query.list();
    
    catch(HibernateException he)
return list;
   

3.javascript

var table = $('#example').dataTable(
     "sPaginationType": "full_numbers",
    "sAjaxSource": "/data/tipeTile/json",
    "sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": 
        "sLengthMenu": "_MENU_ records per page",
        "sSearch": ""
    
         ); 

4.html

  <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
                            <thead>
                                <tr>
                                    <th style="width: 50px">No</th>
                                    <th>Name</th>
                                    <th>Density</th>

                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

希望得到帮助

【参考方案2】：

来自数据表站点的Example 为您提供所需的所有详细信息。

示例 JS 代码

$(document).ready(function() 
  $('#example').dataTable( 
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "scripts/server_processing.php" // for you it will be - /getWidgetsByType
   );
 );

你的 json 应该是这样的

  "sEcho": 1,
  "iTotalRecords": "57",
  "iTotalDisplayRecords": "57",
  "aaData": [
    [],[],[],...
  ]

Here's 示例显示动态设置列名。

干杯！！

【讨论】：

感谢@bhb (+1) - 但是是bProcessing 和bServerSide 数据表参数还是特定于应用程序的查询字符串参数？如果我的服务器端不是 PHP 文件而是从 URL /getWidgetsByType 映射的 Spring MVC 处理程序怎么办？再次感谢！

只要您的服务器端代码推送上面显示的 json 格式，就没有关系。如果由于某种原因这很困难，您也可以从其他来源阅读。检查this。如果您的 json 是一个对象数组（而不是如上所示的数组数组），请尝试类似 this

那么我什至需要拨打$.getJSON，还是拨打$("#table-to-display").datatable() ... ; 为我做这件事？

没有问题 :)。所以如果json是像demo:[[],[]...]这样的数组数组，那么数组元素的顺序就指定了列的顺序。

太酷了。再次感谢 - 所有的灯泡（嗯，大部分）都亮了。感谢您帮助我连接点

【参考方案3】：

从 Spring 获取适当的 JSON 数据到 DataTable 的最简单方法是，不是返回实体列表，而是返回如下映射：

    @RequestMapping(value = "/getWidgetsByType", method = RequestMethod.POST)
public @ResponseBody Map<String, WidgetVO> getWidgetsByType(@RequestParam("type") String type) 
    Map<String, WidgetVO> result = new HashMap<>();
    result.put("WidgetVO", widgetDAO.getWidgetsByType(token));
    return result;

就是这样，现在您可以访问您的对象了：

 $(document).ready(function() 
$('#example').dataTable( 
    "ajax": "data/objects.txt",
    "dataSrc": "WidgetVO",
    "columns": [
         "data": "type" ,
         "data": "name" ,
         "data": "isAwesome" 

    ]
);

);