jquery datatables的使用实例

<script language="javascript" type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>

<script language="javascript" type="text/javascript" src="js/DataTables1.8.2/media/js/jquery.dataTables.min.js"></script>

    <style type="text/css" title="currentStyle">
        @import "js/DataTables-1.8.2/media/css/demo_page.css";
        @import "js/DataTables-1.8.2/media/css/demo_table_jui.css";
        @import "js/DataTables-1.8.2/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
    </style>

        var oTableAll;
       
        function fnGetSelected(oTableLocal) {
            var aReturn = new Array();
            var aTrs = oTableLocal.fnGetNodes();
            for (var i = 0; i < aTrs.length; i++) {
                if ($(aTrs[i]).hasClass('row_selected'))
                { aReturn.push(aTrs[i]); }
            }
            return aReturn;
        }

        function addtableClick(id, table) {
            $("#" + id + " tbody").click(function (event) {
                $(table.fnSettings().aoData).each(function ()
                { $(this.nTr).removeClass('row_selected'); });
                $(event.target.parentNode).addClass('row_selected');
            });
        }

        function InitExampleALL() {
            oTableAll = $('#example1').dataTable({
                "iDisplayLength": 10, //每页显示个数  
                "bScrollCollapse": true,
                "bLengthChange": true,  //每页显示的记录数 
                "bPaginate": true,  //是否显示分页
                "bFilter": true, //搜索栏
                "bSort": true, //是否支持排序功能
                "bInfo": true, //显示表格信息
                "bAutoWidth": false,  //自适应宽度
                "bStateSave": false, //保存状态到cookie *************** 很重要 ，当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
                "oLanguage": {
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到任何相关数据",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoEmtpy": "找不到相关数据",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sProcessing": "正在加载中...",
                    "sSearch": "搜索",
                    "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": " 上一页 ",
                        "sNext": " 下一页 ",
                        "sLast": " 最后一页 "
                    }
                }, //多语言配置
                "bJQueryUI": true, //可以添加 jqury的ui theme  需要添加css
                "aLengthMenu": [[10, 15, 20], ["10", "15", "20"]],
                "bServerSide": false,
                "sAjaxSource": "Job.ashx",
                "sAjaxDataProp": "aaData",
                "bProcessing": true,
                "sPaginationType": "full_numbers",
                "aoColumns": [
                    { "sClass": 'tdJobName',
                        "fnRender": function (obj) {
                            return '<a href="DetailJob.aspx?JobID=' + obj.aData[6] + '" target="_blank">' + obj.aData[0] + '</a>';
                        }
                    },
                    { "sClass": 'tdDepartment' },
     { "sClass": 'tdCity',
         "fnRender": function (obj) {
             return "<div style='position:relative;'><div οnmοuseοver="this.className='divover'" οnmοuseοut="this.className='divout'" class="divout">" + obj.aData[2] + "</div></div>";
         }
     },
                    { "sClass": 'tdPeoples' },
                    { "sClass": 'tdDate' },
     { "sClass": 'tdInsertBy' }

    ]
            });
            addtableClick("example1", oTableAll);
        }