免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1766 | 回复: 1
打印 上一主题 下一主题

datatable用法(3) [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2012-02-17 14:44 |只看该作者 |倒序浏览

datatable用法(3)


jquerydatatablestruts2json.

再添加一个功能,对各个列进行过滤。
添加js代码:
  1. 1.function fnCreateSelect( aData )   
  2. 2.{   
  3. 3.    var r='<select><option value=""></option>', i, iLen=aData.length;   
  4. 4.    for ( i=0 ; i<iLen ; i++ )   
  5. 5.    {   
  6. 6.        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';  
  7. 7.    }   
  8. 8.    return r+'</select>';   
  9. 9.}   
  10. 10.   
  11. 11.  
  12. 12.(function($) {   
  13. 13.    /*  
  14. 14.     * Function: fnGetColumnData  
  15. 15.     * Purpose:  Return an array of table values from a particular column.  
  16. 16.     * Returns:  array string: 1d data array   
  17. 17.     * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function  
  18. 18.     *           int:iColumn - the id of the column to extract the data from  
  19. 19.     *           bool:bUnique - optional - if set to false duplicated values are not filtered out  
  20. 20.     *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)  
  21. 21.     *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array  
  22. 22.     * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>  
  23. 23.     */  
  24. 24.    $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {   
  25. 25.        // check that we have a column id   
  26. 26.        if ( typeof iColumn == "undefined" ) return new Array();   
  27. 27.            
  28. 28.        // by default we only wany unique data   
  29. 29.        if ( typeof bUnique == "undefined" ) bUnique = true;   
  30. 30.            
  31. 31.        // by default we do want to only look at filtered data   
  32. 32.        if ( typeof bFiltered == "undefined" ) bFiltered = true;   
  33. 33.            
  34. 34.        // by default we do not wany to include empty values   
  35. 35.        if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;   
  36. 36.            
  37. 37.        // list of rows which we're going to loop through   
  38. 38.        var aiRows;   
  39. 39.            
  40. 40.        // use only filtered rows   
  41. 41.        if (bFiltered == true) aiRows = oSettings.aiDisplay;   
  42. 42.        // use all rows   
  43. 43.        else aiRows = oSettings.aiDisplayMaster; // all row numbers   
  44. 44.        
  45. 45.        // set up data array      
  46. 46.        var asResultData = new Array();   
  47. 47.            
  48. 48.        for (var i=0,c=aiRows.length; i<c; i++) {   
  49. 49.            iRow = aiRows[i];   
  50. 50.            var aData = this.fnGetData(iRow);   
  51. 51.            var sValue = aData[iColumn];   
  52. 52.               
  53. 53.            // ignore empty values?   
  54. 54.            if (bIgnoreEmpty == true && sValue.length == 0) continue;   
  55. 55.        
  56. 56.            // ignore unique values?   
  57. 57.            else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;   
  58. 58.               
  59. 59.            // else push the value onto the result data array   
  60. 60.            else asResultData.push(sValue);   
  61. 61.        }   
  62. 62.            
  63. 63.        return asResultData;   
  64. 64.    }}(jQuery));   
复制代码
在前面博客中的原来的 sortData()方法中添加js:
  1. 1.$("tfoot th").each( function ( i ) {   
  2. 2.        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );   
  3. 3.        $('select', this).change( function () {   
  4. 4.            oTable.fnFilter( $(this).val(), i );   
  5. 5.        } );   
  6. 6.    } );   
复制代码
在页面table中添加一个:
  1. 1.<tfoot>  
  2. 2.                    <tr>  
  3. 3.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  4. 4.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  5. 5.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  6. 6.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  7. 7.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  8. 8.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  9. 9.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  10. 10.                        <th  width ='10%' align='center'  class='w_01' ></th>  
  11. 11.                    </tr>  
  12. 12.                </tfoot>  
复制代码
最后别忘了,引入datatable的js:
jquery.dataTables.js,
jquery.dataTables.css//是他自带css,要是想改式样的,就直接修改里面的css。省省不少使呢。。。。
还有,最好的学习方法是直接看官方文档,不过英文的,很难消化。

以上,完毕。

论坛徽章:
0
2 [报告]
发表于 2012-02-17 22:14 |只看该作者
谢谢分享
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP