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:

  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 就好了。

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

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

上一篇:Jquery Datatables 请求参数及接收参数处理


下一篇:Jquery.Datatables 服务器处理(Server-side processing)