Jquery DataTables warning : Requested unknown from the data source for row 0

昨天在做 Jquery DataTables 的时候，遇到的一个问题，我使用MVC，在tables上加入了一个actionlink的href。但是在运行起来的时候，报错：

DataTables warning: Requested unknown parameter ‘3‘ from the data source for row 0

通过search一下网上大神们的解决方法，所以我就把blogs上的解决方法给copy过来了，这是原文链接地址 http://seaboycs.iteye.com/blog/2015230

希望能够帮助遇到同样问题的朋友，也给自己的工作总结一下

今天遇到一个Datatables常见的问题，搞了好久没弄好，查看baidu也没有成果，在google上查到了原因。

问题：

DataTables warning: Requested unknown parameter ‘3‘ from the data source for row 0

JS:

Js代码  

1. function initializeEvents() {
2. $(‘.datatable‘).dataTable({
3. "sDom": "<‘row-fluid‘<‘span6‘l><‘span6‘f>r>t<‘row-fluid‘<‘span12‘i><‘span12 center‘p>>",
4. "bServerSide" : true,
5. "sAjaxSource" : "/uploadDemo/admin/photo/list.spring",
6. "sServerMethod" : "POST" ,
7. "bProcessing" : false,
8. "bPaginate": true,
9. "bLengthChange" : true,
10. "iDisplayLength" : 10,
11. "fnAdjustColumnSizing" : false,
12. "bStateSave": false,
13. "bSort":false,
14. "bFilter":false,
15. "aoColumnDefs" : makeCollumnDef(),
16. "aoColumns" : makeCollomns(),
17. "sPaginationType": "bootstrap",
18. "oLanguage": {
19. "sLengthMenu": "_MENU_ records per page"
20. }
21. } );
22. }
23. function makeCollumnDef() {
24. return [
25. { "fnRender" : function (oObj, sVal) {
26. return oObj.aData.id;
27. },
28. "bVisible" : true ,
29. "aTargets" : [ 0 ]
30. },
31. { "fnRender" : function (oObj, sVal) {
32. return oObj.aData.name;
33. },
34. "bVisible" : true ,
35. "aTargets" : [ 1 ]
36. },
37. { "fnRender" : function (oObj, sVal) {
38. return "<img src=‘/uploadDemo/" +oObj.aData.path +"‘ width=50px height=40px />";
39. },
40. "bVisible" : true ,
41. "aTargets" : [ 2 ]
42. },
43. { "fnRender" : function (oObj, sVal) {
44. return createAction(oObj.aData.id);
45. },
46. "bVisible" : true ,
47. "aTargets" : [ 3 ]
48. }];
49. }
50. function makeCollomns(){
51. return [{ "mDataProp" : "id", "sHeight":"15px"},
52. { "mDataProp" : "name"},
53. { "mDataProp" : "path"}}];
54. }
55. function createAction(id) {
56. var inhtml = ‘<a class="btn btn-success" href="/uploadDemo/admin/photo/view.spring?id=‘ + id + ‘">‘;
57. inhtml += ‘<i class="icon-zoom-in icon-white"></i>View</a> ‘;
58. inhtml += ‘<a class="btn btn-info" href="/uploadDemo/admin/photo/preUpdate.spring?id=‘ + id + ‘">‘;
59. inhtml += ‘<i class="icon-edit icon-white"></i>Edit</a> ‘;
60. inhtml += ‘<a class="btn btn-danger" href="/uploadDemo/admin/photo/delete.spring?id=‘ + id + ‘">‘;
61. inhtml += ‘<i class="icon-trash icon-white"></i>Delete</a>‘;
62. return inhtml;
63. }

参考了 https://gist.github.com/kagemusha/1660712 这个大神的解决方案：

意思就是 aoColumns 和 aoColumnDefs的个数必须相等，否则会出错，由于我在表格中加入了一个Action列，导致aoColumns 和 aoColumnDefs的数目不等，就出了上面的错，该法就比较简单：

在 Java Bean 中添加一个任意字段，把他添加到aoColumnDefs 就好了。

Java代码  

1. public class PhotoBean {
2. private int id;
3. private String name;
4. private String path;
5. private String checked;

Js代码  

1. function makeCollomns(){
2. return [{ "mDataProp" : "id", "sHeight":"15px"},
3. { "mDataProp" : "name"},
4. { "mDataProp" : "path"},
5. { "mDataProp" : "checked"}];

我添加了一个checked的字符串，问题解决。

Jquery DataTables warning : Requested unknown from the data source for row 0