![]()
Step 2: Add some CSS to change the table layout to fixed and the cell overflow to ellipse. Import 'jquery-ui/themes/base/resizable.css' Import "jquery-ui/ui/widgets/resizable.js" Import "jquery-ui/ui/disable-selection.js" JqueryUI can add add a lot bloatware to your project, but for resizing, you only need the following: import "jquery-ui/ui/widget.js" ![]() JQUERY DATATABLE ADJUST COLUMNS ON RESIZE CODEI cannot give you a fully working solution because the code is entwined in a large project, but below are some steps to get you going in the right direction: The difficulty in resizing columns by dragging the column headers arises if you are using the Scroller because DataTables creates two tables - one for the ScrollHeader and another for the ScrollBodyĪfter much trial and error, I tried using JQueryUI's resizable functionality and it works quite well. This extension also has a few extra api functions which can be called by using the created DataTables instance.If you want to allow a user to drag and resize columns, you can use the but it is still a bit buggy despite recently being re-factored and comes with a lot of additional code for re-ordering columns which over-complicates it unnecessarily. Sets a fixed header and tbody height with scroll functionality. scrollY: number much like the DT scrollY.stateSave: boolean set to true if you wish to save the column width states using the DT default state saving mechanism.If set to true, when a column is resized, the neighbouring column is left untouched and the table shifts accordingly. The width of the columns is determined automatically in order to accommodate the content in the. Default behaviour is that when a column is resized the neighbouring column expands/shrinks accordingly. By default, the table will expand to the width of its container. resizeTable: boolean set to true if you want the entire table to be shifted when a column is resized.minColumnWidth: number must be equal too or greater than the sum of the cell's padding (left + right). JQUERY DATATABLE ADJUST COLUMNS ON RESIZE HOW TOThe DataTables installation manual also has details on how to use package managers with DataTables. Please see the DataTables NPM and Bower installation pages for further information. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name. ![]() responsive.recalc().columns.adjust() solved it. Then, whenever the sidebar was collapsed or reopened, I was calling the columns.adjust().responsive.recalc() Reordering it. even the older column reordering and resizing didn't seem to be as neat. Even a basic table with column searching still prevents it from working. Using the 'inspect element' feature in google chrome I found that, when calling 'datatable ()' datatables's method, datatables API used a fixed width based on the space needed to display the amount of columns. ![]() JQUERY DATATABLE ADJUST COLUMNS ON RESIZE MODSo what was happening was, the table was being created on the first load. Tested it out, works well on a simple Datatable, but doesn't seem to work once you mod your table like adding scrollX, scrollY, paging, processing etc. ![]() JQUERY DATATABLE ADJUST COLUMNS ON RESIZE SOFTWAREIf you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name dt-colresize. I had tabs as well a sidebar in my application.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |