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

標籤：blog   http   java   使用   os   width   

  昨天在做 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.   
3.     private int id;  
4.     private String name;  
5.     private String path;  
6.     private String checked;  

 

 

Js代碼  

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

 

我添加了一個checked的字串，問題解決。