3

次のように、 POJOをJSONオブジェクトとして返すJava （Spring MVC）バックエンドがあります。

@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/getWidgetsByType呼び出しの内部から呼び出して、そこから返されるJSONの結果を使用してデータテーブルにデータを入力しようとしています。具体的には、次のように、ページの読み込み時に現在空のタグ内にデータテーブルを表示する必要があります。 $.getJSON<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();
    }
);

（type、name、isAwesome）のフィールドとdatatable同じ列を、すべて値（レンダラーなどなし） として含めたいと思います。WidgetVOString

ここで助けてくれてありがとう！

4

3 に答える 3

2

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>

このヘルプを願っています

于 2014-11-13T07:33:16.583 に答える
1

datatableサイトの例から、必要なすべての詳細がわかります。

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": [
    [],[],[],...
  ]
}

これは、列名をその場で設定する方法を示す例です。

乾杯！！

于 2012-10-11T14:14:45.800 に答える
1

SpringからDataTableに適切なJSONデータを取得する最も簡単な方法は、エンティティのリストを返す代わりに、次のようなマップを返すことです。

    @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" }

    ]
});

}）;

于 2014-11-16T22:46:56.283 に答える