首页 > 代码库 > Jquery DataTables warning : Requested unknown from the data source for row 0

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=http://www.mamicode.com/‘/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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的字符串,问题解决。