The front-end uses Datatables to create a Demo that includes functions such as search, automatic paging, column sorting, switching the number of display items, printing, and saving multiple file formats. datatablesdemo
I. background
The project has a table module that provides functions such as filtering, sorting, paging, editing, and printing tables. Many widgets are found online, among them, SpreadJS, a pure front-end table control, can basically implement all the functions of excel, perfect to meet the requirements, but it is charged, and can only be done, and later found that Datatables is actually good, with many extended functions, you can also write some other functions. The Datatables documentation is available on the official website. There are also many examples of usage:
You will always find what you want.
Ii. Basic usage
Introduce js and css of jquery and dataTables, and initialize a table tag.
<! -- Introduce css --> <link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <! -- Introduce JavaScript --> <script type = "text/javascript" language = "javascript" src = "// code.jquery.com/jquery-1.12.4.js"> </script> <script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"> </script> <body> <div> <table id = "example"> <table> </div> </body> <! -- Initialization code --> <script >$ (document). ready (function () {$ ('# example'). DataTable () ;}); </script>
Table data can be added in multiple ways. For example, the <table> tag contains all the data, js-defined data, and data obtained from the backend Using ajax:
1 <table id = "example"> 2 <thead> 3 <tr> 4 <th> Column 1 </th> 5 <th> Column 2 </th> 6 <th> Column 3 </th> 7 <th> Column 4 </th> 8 </tr> 9 </thead> 10 <tbody> 11 </tbody> 12 </table> 13 14 <script> 15 let data = [[1, 2, 3, 4], [5, 6, 7, 8]; 16 $ ('# example '). dataTable (17 data: data18 // ajax: 'server/data' <! -- Data from the server --> 19); 20 </script>
These are relatively simple, but adding the extension function or combining the bootstrap style will be a little bit of trouble, but it is also easy to try the document more. Here we mainly implement the features mentioned in the title, list the files to be introduced to avoid unnecessary troubles.
<! -- Bootstrap --> <link rel = "stylesheet" href = "./plugIns/bootstrap-3.3.7/css/bootstrap.min.css"> <! -- Bootstrap style for table --> <link rel = "stylesheet" href = "./plugIns/datatables-1.10.15/media/css/dataTables.bootstrap.min.css"> <! -- Font icon --> <link rel = "stylesheet" href = "./plugIns/Font-Awesome-3.2.1/css/font-awesome.min.css"> <! -- Table button extension style --> <link rel = "stylesheet" href = "./plugIns/datatables-1.10.15/extensions/Buttons/css/buttons.dataTables.min.css"> <! -- JQuery --> <script src = "../plugIns/datatables-1.10.15/media/js/jquery. js"> </script> <! -- DataTables --> <script src = ". /plugIns/datatables-1.10.15/media/js/jquery. dataTables. min. js "> </script> <script src = ". /plugIns/datatables-1.10.15/media/js/dataTables. bootstrap. min. js "> </script> <! -- Button extension --> <script src = ". /plugIns/datatables-1.10.15/extensions/Buttons/js/dataTables. buttons. min. js "> </script> <script src = ". /plugIns/JSZip-v3.1.3/jszip. min. js "> </script> <script src = ". /plugIns/datatables-1.10.15/extensions/Buttons/js/buttons.html 5. min. js "> </script> <script src = ". /plugIns/plugin make/0.1.31/plugin make. min. js "> </script> <script src = ". /plugIns/pdfmake/0.1.31/vfs_fonts.js "> </script> <script src = ". /plugIns/datatables-1.10.15/extensions/Buttons/js/buttons. print. min. js "> </script>
Some of the files here are not in the Ables package and need to be downloaded separately, using make and JSZip.
Button initialization:
Var table = $ ('# example '). dataTable ({// ajax: 'server/data', data: data, buttons: [{extend: 'copy', className: 'btn btn-default ', // Add additional style text: '<span class = "icon-copy"> </span>' // font icon}, {extend: 'csv', className: 'btn btn-default', text: '<span class = "icon-list-alt"> </span>'}, {extend: 'excel ', className: 'btn btn-default', text: '<span class = "icon-table"> </span>'}, {extend: 'pdf ', className: 'btn btn-default', text: '<span class = "icon-facebook-sign"> </span>'}, {extend: 'print', className: 'btn btn-default', text: '<span class = "icon-print"> </span>'}],});
Table. buttons (). container (). appendTo ($ ('. buttons'); // Add the button to the specified container
The other thing is that the data in the table cannot be edited. I wrote a cell by clicking it and changed it into an input box. It seems that there is only one additional cursor, similar to the excel editing effect, the input box gets the focus, and the cursor is placed at the end of the text code.
/*** After the input box gets the focus, cursor at the end of the text * @ param {[type]} position [description] * @ return {[type]} [description] */$. fn. setCursorPosition = function (position) {if (this. lengh = 0) return this; return $ (this ). setSelection (position, position);} $. fn. setSelection = function (selectionStart, selectionEnd) {if (this. lengh = 0) return this; input = this [0]; if (input. createTextRange) {var range = input. createTextRange (); range. collapse (true); range. moveEnd ('character ', selectionEnd); range. moveStart ('character ', selectionStart); range. select ();} else if (input. setSelectionRange) {input. focus (); input. setSelectionRange (selectionStart, selectionEnd);} return this ;}$. fn. focusEnd = function () {this. setCursorPosition (this. val (). length );}
You can call it directly: $ ('input'). focusEnd (); and attach the interface image:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
