jquery数据表插件DataTables 用法
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" /> <title>DataTables example</title> <style type="text/css" title="currentStyle"> @import "http://www.cnblogs.com/media/css/demo_page.css"; @import "http://www.cnblogs.com/media/css/demo_table.css"; @import "../examples_support/jquery.tooltip.css"; @import "http://www.cnblogs.com/media/css/demo_table_jui.css"; @import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css"; </style> <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../examples_support/jquery.tooltip.js"></script> <script type="text/javascript" charset="utf-8"> var asInitVals = new Array(); $(document).ready(function() { /* Init DataTables */ var oTable = $('#example').dataTable({ "bProcessing": false, "sAjaxSource": "../ajax/sources/array_only.txt", // "oLanguage": { // "sLengthMenu": "Display _MENU_ records per page", //显示pagesize信息 // "sZeroRecords": "Nothing found - sorry", //没有数据时显示的信息 // "sInfo": "Showing _START_ to _END_ of _TOTAL_ records", //显示分页信息 从第一页到第几页 // "sInfoEmpty": "Showing 0 to 0 of 0 records", //显示没有数据时分页信息文字 // //"sInfoFiltered": "(filtered from _MAX_ total records)" // }, "oLanguage": { "sUrl": "../examples_support/de_DE.txt", "sSearch": "Search all columns:" }, "bJQueryUI": true, //是否将分页样式应用到表格 "sPaginationType": "full_numbers", //分页样式 "bPaginate": true, //是否允许分页 "bLengthChange": true, //是否显示每页显示条数 "bFilter": true, //是否启用条件查询 "bSort": true, //是否启用列排序 "bInfo": true, //是否显示分页信息 "bAutoWidth": false, "aaSorting": [[4, "desc"]], //默认按照第几列排序,从1开始 "aoColumnDefs": [ { "sClass": "center", "fnRender": function(oObj, sVal) { return '<input type="checkbox" id="' + sVal + '" title="' + oObj.aData[0] + '" name="check' + sVal + '" />'; }, "bSortable": false, "aTargets": [0] }, { "fnRender": function(oObj, sVal) { return '<span>' + sVal + '</span>' + '<br/>' + '<a href="#" title="' + oObj.aData[5] + '"> 创建</a>' + ' <a href="#">删除</a>' + ' <a href="#">编辑</a>' + ' <a href="#">查看</a>'; }, "sClass": "center", "bSortable": false, "aTargets": [1] }, { "sClass": "center", "aTargets": [4] }, { "sClass": "center", "aTargets": [5] } ] //==============修改页脚成我们想要的样子==================== // "fnFooterCallback": function(nRow, aaData, iStart, iEnd, aiDisplay) { // nRow.getElementsByTagName('th')[5].innerHTML = "Starting index is " + iStart; // /* // * Calculate the total market share for all browsers in this table (ie inc. outside // * the pagination) // */ // var iTotalMarket = 0; // for (var i = 0; i < aaData.length; i++) { // iTotalMarket += aaData[i][4] * 1; // } // /* Calculate the market share for browsers on this page */ // var iPageMarket = 0; // for (var i = iStart; i < iEnd; i++) { // iPageMarket += aaData[aiDisplay[i]][4] * 1; // } // /* Modify the footer row to match what we want */ // var nCells = nRow.getElementsByTagName('th'); // nCells[6].innerHTML = parseInt(iPageMarket * 100) / 100 + // '% (' + parseInt(iTotalMarket * 100) / 100 + '% total)'; // } }); //========================================= $("tfoot input").keyup(function() { /* Filter on the column (the index) of this element */ oTable.fnFilter(this.value, $("tfoot input").index(this)); }); /* * Support functions to provide a little bit of 'user friendlyness' to the textboxes in * the footer */ $("tfoot input").each(function(i) { asInitVals[i] = this.value; }); $("tfoot input").focus(function() { if (this.className == "search_init") { this.className = ""; this.value = ""; } }); $("tfoot input").blur(function(i) { if (this.value == "") { this.className = "search_init"; this.value = asInitVals[$("tfoot input").index(this)]; } }); //============================================== /* Add events */ // $('#example tbody tr').live('click', function() { // var sTitle; // var nTds = $('td', this); // var sBrowser = $(nTds[1]).text(); // var sGrade = $(nTds[4]).text(); // if (sGrade == "A") // sTitle = sBrowser + ' will provide a first class (A) level of CSS support.'; // else if (sGrade == "C") // sTitle = sBrowser + ' will provide a core (C) level of CSS support.'; // else if (sGrade == "X") // sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.'; // else // sTitle = sBrowser + ' will provide an undefined level of CSS support.'; // alert(sTitle); // }); //======================================= $('#example tbody tr').each(function() { var sTitle; var nTds = $('td', this); var sBrowser = $(nTds[1]).text(); var sGrade = $(nTds[4]).text(); if (sGrade == "A") sTitle = sBrowser + ' will provide a first class (A) level of CSS support.'; else if (sGrade == "C") sTitle = sBrowser + ' will provide a core (C) level of CSS support.'; else if (sGrade == "X") sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.'; else sTitle = sBrowser + ' will provide an undefined level of CSS support.'; this.setAttribute('title', sTitle); }); /* Apply the tooltips */ $('#example tbody tr[title]').tooltip({ "delay": 0, "track": true, "fade": 250 }); $('#example').dataTable(); //======================自定义函数 $("#example input[name='checkall']").click(function() { var check = $(this).attr("checked") == undefined ? false : true; $("#example tr input[type='checkbox']").each(function() { //alert(typeof(this)); $(this).attr("checked", check); }); }); }); </script> </head> <body id="dt_example" class="ex_highlight_row"> <div id="container"> <h1> DataTable example</h1> <div id="demo"> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th width="8%"> <input type="checkbox" name="checkall" /> </th> <th width="20%"> Rendering engine </th> <th> Browser </th> <th width="20%"> Platform(s) </th> <th width="20%"> Engine version </th> <th> CSS grade </th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th> <input type="checkbox" name="checkall" /> </th> <th> <input type="text" name="search_engine" value="Search engines" class="search_init" /> </th> <th> <input type="text" name="search_browser" value="Search browsers" class="search_init" /> </th> <th> <input type="text" name="search_platform" value="Search platforms" class="search_init" /> </th> <th> <input type="text" name="search_version" value="Search versions" class="search_init" /> </th> <th> <input type="text" name="search_grade" value="Search grades" class="search_init" /> </th> </tr> <!-- <tr> <th colspan="2"> </th> <th colspan="3"> </th> </tr>--> </tfoot> </table> </div> <div class="spacer"> </div> <h1> Other examples</h1> <div class="demo_links"> <h2> Basic initialisation</h2> <ul> <li><a href="../basic_init/zero_config.html">Zero configuration</a></li> <li><a href="../basic_init/filter_only.html">Feature enablement</a></li> <li><a href="../basic_init/table_sorting.html">Sorting data</a></li> <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li> <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li> <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li> <li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li> <li><a href="../basic_init/dom.html">DOM positioning</a></li> <li><a href="../basic_init/flexible_width.html">Flexible table width</a></li> <li><a href="../basic_init/state_save.html">State saving</a></li> <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li> <li>Scrolling: <br> <a href="../basic_init/scroll_x.html">Horizontal</a> / <a href="../basic_init/scroll_y.html"> Vertical</a> / <a href="../basic_init/scroll_xy.html">Both</a> / <a href="../basic_init/scroll_y_theme.html"> Themed</a> / <a href="../basic_init/scroll_y_infinite.html">Infinite</a> </li> <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li> <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li> </ul> <h2> Advanced initialisation</h2> <ul> <li>Events: <br> <a href="../advanced_init/events_live.html">Live events</a> / <a href="../advanced_init/events_pre_init.html"> Pre-init</a> / <a href="../advanced_init/events_post_init.html">Post-init</a> </li> <li><a href="../advanced_init/column_render.html">Column rendering</a></li> <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li> <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li> <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li> <li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li> <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li> <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li> <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li> <li><a href="../advanced_init/row_callback.html">Row callback</a></li> <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li> <li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li> <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li> <li><a href="../advanced_init/defaults.html">Setting defaults</a></li> <li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li> <li><a href="../advanced_init/dt_events.html">Custom events</a></li> </ul> <h2> API</h2> <ul> <li><a href="../api/add_row.html">Dynamically add a new row</a></li> <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li> <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li> <li><a href="../api/highlight.html">Highlight rows and columns</a></li> <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li> <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li> <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li> <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li> <li><a href="../api/form.html">Submit form with elements in table</a></li> <li><a href="../api/counter_column.html">Index column (static number column)</a></li> <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li> <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li> <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li> <li><a href="../api/regex.html">Regular expression filtering</a></li> </ul> </div> <div class="demo_links"> <h2> Data sources</h2> <ul> <li><a href="../data_sources/dom.html">DOM</a></li> <li><a href="../data_sources/js_array.html">Javascript array</a></li> <li><a href="../data_sources/ajax.html">Ajax source</a></li> <li><a href="../data_sources/server_side.html">Server side processing</a></li> </ul> <h2> Server-side processing</h2> <ul> <li><a href="../server_side/server_side.html">Obtain server-side data</a></li> <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li> <li><a href="../server_side/post.html">Use HTTP POST</a></li> <li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li> <li><a href="../server_side/object_data.html">Reading table data from objects</a></li> <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li> <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li> <li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li> <li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li> <li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li> <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li> </ul> <h2> Ajax data source</h2> <ul> <li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li> <li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li> <li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li> <li><a href="../ajax/null_data_source.html">Empty data source columns</a></li> <li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li> <li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li> <li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li> </ul> <h2> Plug-ins</h2> <ul> <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li> <li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li> <li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li> <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li> <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li> <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li> <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li> </ul> </div> </div> </body> </html>
效果图:
