使用 jQuery Datatables plugin 時，出現 Bean 錯誤

這是最近在處理 spring MVC 專案時遇到的問題。

這個專案前端使用了 jQuery + Datatable plugin；

而在後端，則是這樣寫（FooBarSearch 是一個 Bean）

@RequestMapping(value="/search")
public @ResponseBody ForBarResultBean search(FooBarSearch search) 

如果我不使用 Datatable ，直接 ajax 傳送 request 的話，沒有問題

可是當我以 Datatable 的 ajax 來處理，如下

$("table").DataTable({
	ajax: {
		url: "${pageContext.request.contextPath}/search",
		type: "POST",
		data: {
			"data-type": ["meet", "fruit", "vegetable"]
		}
	}
})

這樣的話，他傳送的 Request parameters 會如下：

draw

1

columns[0][data]

data-id

columns[0][name]

columns[0][searchable]

true

columns[0][orderable]

true

columns[0][search][value]

columns[0][search][regex]

false

columns[1][data]

data-type

columns[1][name]

columns[1][searchable]

true

columns[1][orderable]

true

columns[1][search][value]

columns[1][search][regex]

false

columns[2][data]

data-name

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]

desc

start

0

length

20

search[value]

search[regex]

false

data-type

meet

data-type

fruit

data-type

vegetable

偏偏 Spring 在解析 Bean 時，無法讀懂 columns[0][data] 這種格式。

Server 會回傳如下錯誤：

Invalid property 'columns[0][data]' of bean class [org.example.model.FooBarSearch]: Property referenced in indexed property path 'columns[0][data]' is neither an array nor a List nor a Map; returned value was [org.example.datatable.Column]
	at org.springframework.beans.AbstractNestablePropertyAccessor.processKeyedProperty(AbstractNestablePropertyAccessor.java:375) ~[spring-beans-5.3.2.jar:5.3.2]
	at org.springframework.beans.AbstractNestablePropertyAccessor.setPropertyValue(AbstractNestablePropertyAccessor.java:275) ~[spring-beans-5.3.2.jar:5.3.2]
	at org.springframework.beans.AbstractNestablePropertyAccessor.setPropertyValue(AbstractNestablePropertyAccessor.java:266) ~[spring-beans-5.3.2.jar:5.3.2]
	at org.springframework.beans.AbstractPropertyAccessor.setPropertyValues(AbstractPropertyAccessor.java:104) ~[spring-beans-5.3.2.jar:5.3.2]

為了解決這問題，得使用 spring-data-jpa-datatables 這個專案。

使用這專案的 jquery.spring-friendly.js （或使用壓縮過的 jquery.spring-friendly.min.js 也可以）就能將參數改成columns[0].data 。

這種格式 Spring 就能讀懂了

---

點我觀看使用 jquery.spring-friendly.js 後，送出的參數會是怎樣

draw

1

columns[0].data

data-id

columns[0].name

columns[0].searchable

true

columns[0].orderable

true

columns[0].search.value

columns[0].search.regex

false

columns[1].data

data-type

columns[1].name

columns[1].searchable

true

columns[1].orderable

true

columns[1].search.value

columns[1].search.regex

false

columns[2].data

data-name

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

desc

start

0

length

20

search.value

search.regex

false

data-type

meet

data-type

fruit

data-type

vegetable