導航:首頁 > 編程語言 > datatables顯示json

datatables顯示json

發布時間:2023-06-18 14:45:10

『壹』 java怎樣將String格式的json轉換成JSONArray

JSONObject(str)這個類就可以把json字元串直接轉成json對象。

轉完之後N-CELL, SI1, SI2, CESP-A 會被放到一個內JSONArray中。
不知道你為什麼要放到array中,而且還有容name,還有4個元素。
java中的array也不是這種結構啊。
我說的類在第三方工具類:json.jar中,你可以先下載,導入jar包,再用。
滿意請採納。

『貳』 求datatables簡單小案例

之前也網路的,自己是這樣寫的,不知道能不能幫到你:

java代碼

@RequestMapping(value="/showArticleList.action",method=RequestMethod.POST)

@ResponseBody

public Object showArticleList(Article article)

{

Map<String,Object> map=new HashMap<String,Object>();

try {

List<Article> list=articleService.findArticle(article);

long totalCount=articleService.findArticleCount(article);

map.put("list", list);

map.put("iTotalDisplayRecords", totalCount);//總記錄數

return map;

} catch (Exception e) {

logger.error("showArticleList.action查詢信息失敗,原因:"+e.getMessage());

map.put("list", null);

map.put("iTotalDisplayRecords", 0);//總記錄數

}

return map;

}

js代碼:

$(function () {

var table = $('#sample_1');

table.dataTable({

bFilter: false,//搜索欄

serverSide: true,//分頁,取數據等等的都放到服務端去

processing: true,//載入數據的時候是否顯示「載入中」

pageLength: 10,//首次載入的數據條數

ordering: false,//排序操作在服務端進行,所以可以關了。

ajax: {//類似jquery的ajax參數,基本都可以用。

type: "post",//後台指定了方式,默認get,外加datatable默認構造的參數很長,有可能超過get的最大長度。

url: "/lmtweb/article/showArticleList.action?systime=" + new Date().getTime(),

dataSrc: "list",//默認data,也可以寫其他的,格式化table的時候取裡面的數據

data: function (d) {//d 是原始的發送給伺服器的數據,默認很長。

var param = {};//因為服務端排序,可以新建一個參數對象

param.start = d.start;//開始的序號

param.limit = d.length;//要取的數據的

// var formData = $("#filter_form").serializeArray();//把form裡面的數據序列化成數組

// formData.forEach(function (e) {

// param[e.name] = e.value;

// });

return param;//自定義需要傳遞的參數。

},

},

columns: [//對應上面thead裡面的序列

{

// "className" : "cell-chechbox",

"orderable" : false,

"data": null,

"render" : function(data, type, row, meta) {

return '<input type="checkbox" value="'+data.u_guid+'" class="checkboxes"/>';

}

},

{

data: "articleId",

},

{ data: "articleTitle", },//欄位名字和返回的json序列的key對應

{ data: "articleAuthor" },

{ data: "articleSaveTime" },

// {

// data: function (e) {//這里給最後一列返回一個操作列表

// //e是得到的json數組中的一個item ,可以用於控制標簽的屬性。

// return '<a class="btn btn-default btn-xs show-detail-json"><i class="icon-edit"></i>顯示詳細</a>';

// }

// },

{

"data": null,

"render" : function(data, type, row, meta) {

return '<a href="javascript:showModify(''+data.articleId+'');" class="btn btn-circle btn-default btn-sm"><i class="fa fa-pencil"></i>修改</a>'+

'<a href="javascript:showDel(''+data.articleId+'');" class="btn btn-circle red-sunglo btn-sm"><i class="fa fa-trash"></i>刪除</a>'+

'<a href="javascript:;" class="btn btn-circle red-sunglo btn-sm"><i class="fa fa-trash"></i>預覽</a>';

}

}

],

initComplete: function (setting, json) {

//初始化完成之後替換原先的搜索框。

//本來想把form標簽放到hidden_filter 裡面,因為事件綁定的緣故,還是拿出來。

// $(tablePrefix + "filter").html("<form id='filter_form'>" + $("#hidden_filter").html() + "</form>");

},

language: {

lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="30">30</option>' + '<option value="50">50</option>' + '</select>',//左上角的分頁大小顯示。

processing: "載入中",//處理頁面數據的時候的顯示

paginate: {//分頁的樣式文本內容。

previous: "上一頁",

next: "下一頁",

first: "第一頁",

last: "最後一頁"

},


zeroRecords: "沒有內容",//table tbody內容為空時,tbody的內容。

//下面三者構成了總體的左下角的內容。

// info: "總共_PAGES_ 頁,顯示第_START_ 到第 _END_ ,篩選之後得到 _TOTAL_ 條,初始_MAX_ 條 ",//左下角的信息顯示,大寫的詞為關鍵字。

info: "總共_PAGES_ 頁,顯示第_START_ 到第 _END_ ,共 _TOTAL_ 條 ",

infoEmpty: "0條記錄",//篩選為空時左下角的顯示。

infoFiltered: ""//篩選之後的左下角篩選提示(另一個是分頁信息顯示,在上面的info中已經設置,所以可以不顯示),

}

});

『叄』 Jquery-datatables插件接收的json數據格式應該是怎樣

1, 程序中的SinoOperate
2, 儲存過程SinoCheckPower
3, 儲存過程SinoGetMoleMenu
註:運行App_Data里的sql文本,改下鏈接內字元串就可使用!Bin里的Helper為「我的Helper類」容的全部

『肆』 怎麼使用ajax為 datatables 獲取數據

dataTables是一種很好用前端表格顯示庫。當載入大量數據時,可以用Ajax 獲取數據來提高效率,增速網頁載入速率。下面以一個例子作示範。

首先,需要下載jquery以及dataTables庫。這里使用的是版本是jQuery v1.11.3和DataTables 1.10.9。下載網址:http://datatables.net/。

先上網頁的代碼。要注意的是,table中的thead和tbody必須要有。

[html] view plain
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<link href="http://www.zhuhaihengxin.com/libs/datatables/1.10.0/css/jquery.dataTables.css" rel="stylesheet">
<title>dataTable example</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$("#datatable").dataTable({
"processing" : true,
"serverSide" : true,
"paginationType":"full_numbers",
"ajax" : "load",
"columns" : [
{"data" : "id"},
{"data" : "firstName"},
{"data" : "lastName"}
]
});
});
</script>
<style>
h2{
text-align:center;
}
div {
float: left;
margin: 10px;
padding: 4px;
}
a{
margin:5px;
}
table,tr,td,th{
border:2px solid #3aec7b;
border-collapse:collapse;
}

</style>
</head>
<body>

<TABLE id="datatable">
<THEAD>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</THEAD>
<tbody>
</tbody>
</TABLE>
</body>
</html>

當網頁載入的時候,ajax發出請求,如下所示。
[html] view plain
draw=[1]
columns[0][data]=[id]
columns[0][name]=[]
columns[0][searchable]=[true]
columns[0][orderable]=[false]
columns[0][search][value]=[]
columns[0][search][regex]=[false]
columns[1][data]=[firstName]
columns[1][name]=[]
columns[1][searchable]=[true]
columns[1][orderable]=[true]
columns[1][search][value]=[]
columns[1][search][regex]=[false]
columns[2][data]=[lastName]
columns[2][name]=[]
columns[2][searchable]=[true]
columns[2][orderable]=[true]
columns[2][search][value]=[]
columns[2][search][regex]=[false]
order[0][column]=[0]
order[0][dir]=[asc]
start=[0]
length=[10]
search[value]=[]
search[regex]=[false]
_=[1441278114568]
其中,draw是請求的序號,start是數據的偏移量,length是需要返回的最大數據條數。search[value]是查找的值。
服務端採用java的servlet完成。為簡單起見,這里直接採用繼承HttpServlet的方式實現。數據本應該從資料庫中提取,但這里為了
簡單,生成了靜態數據集合作為數據源。每次請求都從集合中查找匹配的數據,然後轉換成JSON返回。JSON庫採用阿里的fastjson。

代碼如下所示。

[java] view plain
package jspTest;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Enumeration;
import java.util.LinkedList;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

import java.util.List;
import java.util.Map;

/**
* Servlet implementation class DataLoad
*/

public class DataLoad extends HttpServlet {
private static final long serialVersionUID = 1L;

static class Person {
private long id;
private String firstName;
private String lastName;

public long getId() {
return id;
}

public void setId(long id) {
this.id = id;
}

public String getFirstName() {
return firstName;
}

public void setFirstName(String firstName) {
this.firstName = firstName;
}

public String getLastName() {
return lastName;
}

public void setLastName(String lastName) {
this.lastName = lastName;
}

public boolean match(String pattern) {
return firstName.contains(pattern) || lastName.contains(pattern) || Long.toString(id).contains(pattern);
}

}

private static Random r = new Random();
private static List<Person> ps = new ArrayList<Person>();

static {
int size = 2512;
for (int k = 0; k < size; ++k)
ps.add(generatePerson());
}

static Person generatePerson() {
Person p = new Person();
p.setId(ps.size() + 1);
p.setFirstName(generateName());
p.setLastName(generateName());
return p;
}

private static String generateName() {
StringBuilder sb = new StringBuilder();
sb.append((char) (r.nextInt(26) + 'A'));
int len = 2 + r.nextInt(4);
for (int k = 0; k < len; ++k)
sb.append((char) (r.nextInt(26) + 'a'));
return sb.toString();
}

private List<Person>result;
public List<Person>getResult(){
return result;
}
/**
* @see HttpServlet#HttpServlet()
*/
public DataLoad() {
super();
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int start=0;
int length=10;
String pattern="";
String draw="1";
Map<String,String[]>params=request.getParameterMap();
for(String attr:params.keySet()){
String[] val=params.get(attr);
System.out.println(attr+"="+Arrays.toString(val));
if(attr.equals("start"))
start=Integer.parseInt(val[0]);
if(attr.equals("length"))
length=Integer.parseInt(val[0]);
if(attr.equals("search[value]"))
pattern=val[0];
if(attr.equals("draw"))
draw=val[0];
}
int total=filter(start, length, pattern);
JSONObject obj = new JSONObject();
obj.put("draw", draw);
obj.put("recordsTotal", ps.size());
obj.put("recordsFiltered", total);
System.out.println(obj.toJSONString());
obj.put("data", result);
response.getWriter().println(obj.toJSONString());
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}

private int filter(int start,int length,String pattern){
result=new LinkedList<Person>();
int total=0;
for(Person s:ps){
if(!s.match(pattern))
continue;
++total;
if(start-->0)
continue;
if(length--<=0)
continue;
result.add(s);
}
return total;
}

public static void main(String[] rags) {
System.out.println(JSON.toJSONString(ps));
DataLoad load=new DataLoad();
load.filter(0, 10, "");
System.out.println(JSON.toJSONString(load.getResult()));
load.filter(0, 10, "a");
System.out.println(JSON.toJSONString(load.getResult()));
load.filter(10, 10, "a");
System.out.println(JSON.toJSONString(load.getResult()));
load.filter(20, 10, "a");
System.out.println(JSON.toJSONString(load.getResult()));
}

}

服務端返回的JSON數據如下所示。其中draw是請求中的draw參數,data是表格中的數據。recordsFiltered是過濾後的數據總數,recordsTotal是原始數據總數。
[html] view plain
{"recordsFiltered":2512,
"data":[{"firstName":"Bzf","id":1,"lastName":"Hazkm"},{"firstName":"Imxi","id":2,"lastName":"Oieb"},{"firstName":"Glyag","id":3,"lastName":"Gvqlf"},{"firstName":"Lwbhl","id":4,"lastName":"Fvvf"},{"firstName":"Audds","id":5,"lastName":"Seunp"},{"firstName":"Otbrq","id":6,"lastName":"Hnal"},{"firstName":"Loji","id":7,"lastName":"Qicn"},{"firstName":"Rjy","id":8,"lastName":"Emrygr"},{"firstName":"Gcglkd","id":9,"lastName":"Ldgrs"},{"firstName":"Txh","id":10,"lastName":"Qwe"}],
"draw":"1",
"recordsTotal":2512}

閱讀全文

與datatables顯示json相關的資料

熱點內容
java監聽器延時 瀏覽:726
itunes備份包含微信聊天記錄 瀏覽:20
怎麼向虛擬機傳文件 瀏覽:677
win10怎麼用軟體激活不了 瀏覽:816
美版a1453是什麼版本 瀏覽:517
電腦里的文件夾按照拼音歸類 瀏覽:996
文件管理器怎麼把視頻壓縮成文件 瀏覽:477
標准化文件名稱包括哪些 瀏覽:85
win10不能讀取dll文件 瀏覽:882
雲騎士重裝系統找不到usb字樣文件 瀏覽:42
皖事通app社保年限在哪裡看 瀏覽:65
為什麼快影顯示沒網路 瀏覽:356
華為如何讓手機升級提醒紅1消失 瀏覽:345
我愛九九商城app 瀏覽:587
劍靈蒼穹武器升級 瀏覽:248
微信錢包微粒貸 瀏覽:654
滾動字幕屏找不到文件 瀏覽:990
鄭州青少年學編程哪個機構比較好 瀏覽:866
ps文件打開不是彩色的 瀏覽:781
監控硬碟格式化工具 瀏覽:512

友情鏈接