javascript - How to set fixed table width(not cell) in table sorter? -
i use table sorter. according table content different pages(pagination) can have different width.
thus if scroll pages looks enough ugly.
is possible set fixed table width. ratio of table column width can change in different pages.
source:
html:
<!-- pager --> <div class="pager"> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/> <span class="pagedisplay"></span> <!-- can element, including input --> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/> <select class="pagesize" title="select page size"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> <select class="gotopage" title="select page number"></select> </div> <table class="tablesorter"> <thead> <tr> <th>name</th> <th>major</th> <th>sex</th> <th>english</th> <th>japanese</th> <th>calculus</th> <th>geometry</th> </tr> </thead> <tfoot> <tr> <th>name</th> <th>major</th> <th>sex</th> <th>english</th> <th>japanese</th> <th>calculus</th> <th>geometry</th> </tr> </tfoot> <tbody> <tr> <td>student01111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</td> <td>languages</td> <td>male</td> <td>80</td> <td>70</td> <td>75</td> <td>80</td> </tr> <tr> <td>student02</td> <td>mathematics</td> <td>male</td> <td>90</td> <td>88</td> <td>100</td> <td>90</td> </tr> <tr> <td>student03</td> <td>languages</td> <td>female</td> <td>85</td> <td>95</td> <td>80</td> <td>85</td> </tr> <tr> <td>student04</td> <td>languages</td> <td>male</td> <td>60</td> <td>55</td> <td>100</td> <td>100</td> </tr> <tr> <td>student05</td> <td>languages</td> <td>female</td> <td>68</td> <td>80</td> <td>95</td> <td>80</td> </tr> <tr> <td>student06</td> <td>mathematics</td> <td>male</td> <td>100</td> <td>99</td> <td>100</td> <td>90</td> </tr> <tr> <td>student07</td> <td>mathematics</td> <td>male</td> <td>85</td> <td>68</td> <td>90</td> <td>90</td> </tr> <tr> <td>student08</td> <td>languages</td> <td>male</td> <td>100</td> <td>90</td> <td>90</td> <td>85</td> </tr> <tr> <td>student09</td> <td>mathematics</td> <td>male</td> <td>80</td> <td>50</td> <td>65</td> <td>75</td> </tr> <tr> <td>student10</td> <td>languages</td> <td>male</td> <td>85</td> <td>100</td> <td>100</td> <td>90</td> </tr> <tr> <td>student11</td> <td>languages</td> <td>male</td> <td>86</td> <td>85</td> <td>100</td> <td>100</td> </tr> <tr> <td>student12</td> <td>mathematics</td> <td>female</td> <td>100</td> <td>75</td> <td>70</td> <td>85</td> </tr> <tr> <td>student13</td> <td>languages</td> <td>female</td> <td>100</td> <td>80</td> <td>100</td> <td>90</td> </tr> <tr> <td>student14</td> <td>languages</td> <td>female</td> <td>50</td> <td>45</td> <td>55</td> <td>90</td> </tr> <tr> <td>student15</td> <td>languages</td> <td>male</td> <td>95</td> <td>35</td> <td>100</td> <td>90</td> </tr> <tr> <td>student16</td> <td>languages</td> <td>female</td> <td>100</td> <td>50</td> <td>30</td> <td>70</td> </tr> <tr> <td>student17</td> <td>languages</td> <td>female</td> <td>80</td> <td>100</td> <td>55</td> <td>65</td> </tr> <tr> <td>student18</td> <td>mathematics</td> <td>male</td> <td>30</td> <td>49</td> <td>55</td> <td>75</td> </tr> <tr> <td>student19</td> <td>languages</td> <td>male</td> <td>68</td> <td>90</td> <td>88</td> <td>70</td> </tr> <tr> <td>student20</td> <td>mathematics</td> <td>male</td> <td>40</td> <td>45</td> <td>40</td> <td>80</td> </tr> <tr> <td>student21</td> <td>languages</td> <td>male</td> <td>50</td> <td>45</td> <td>100</td> <td>100</td> </tr> <tr> <td>student22</td> <td>mathematics</td> <td>male</td> <td>100</td> <td>99</td> <td>100</td> <td>90</td> </tr> <tr><td>student23</td><td>mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr> <tr><td>student24</td><td>languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr> <tr><td>student25</td><td>mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr> <tr><td>student26</td><td>languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr> <tr><td>student27</td><td>mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr> <tr><td>student28</td><td>languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr> <tr><td>student29</td><td>mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr> <tr><td>student30</td><td>languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr> <tr><td>student31</td><td>mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr> <tr><td>student32</td><td>languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr> <tr><td>student33</td><td>mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr> <tr><td>student34</td><td>languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr> <tr><td>student35</td><td>mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr> <tr><td>student36</td><td>languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr> <tr><td>student37</td><td>mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr> <tr><td>student38</td><td>languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr> <tr><td>student39</td><td>mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr> <tr><td>student40</td><td>languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr> <tr><td>student41</td><td>mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr> <tr><td>student42</td><td>languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr> <tr><td>student43</td><td>mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr> <tr><td>student44</td><td>languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr> <tr><td>student45</td><td>mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr> <tr><td>student46</td><td>languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr> <tr><td>student47</td><td>mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr> <tr><td>student48</td><td>languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr> <tr><td>student49</td><td>mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr> <tr><td>student50</td><td>languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr> </tbody> </table> <!-- pager --> <div class="pager"> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/> <span class="pagedisplay"></span> <!-- can element, including input --> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/> <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/> <select class="pagesize" title="select page size"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> <select class="gotopage" title="select page number"></select> </div> js:
$('table').tablesorter({ // *** appearance *** // add theme - try 'blackice', 'blue', 'dark', 'default' // 'dropbox', 'green', 'grey' or 'ice' // use 'bootstrap' or 'jui', you'll need add "uitheme" // widget , set same name // option adds table class name "tablesorter-{theme}" theme: 'blackice', // fix column widths widthfixed: false, // show indeterminate timer icon in header when table // sorted or filtered showprocessing: false, // header layout template (html ok); {content} = innerhtml, // {icon} = <i/> (class cssicon) headertemplate: '{content}', // return modified template string onrendertemplate: null, // function(index, template){ return template; }, // called after each header cell rendered, use index target column // customize header html onrenderheader: function (index) { // span wrapper added default $(this).find('div.tablesorter-header-inner').addclass('roundedcorners'); }, // *** functionality *** // prevent text selection in header cancelselection: true, // other options: "ddmmyyyy" & "yyyymmdd" dateformat: "mmddyyyy", // key used select more 1 column multi-column // sorting. sortmultisortkey: "shiftkey", // key used remove sorting on column sortresetkey: 'ctrlkey', // false german "1.234.567,89" or french "1 234 567,89" usnumberformat: true, // if true, parsing of table cell data delayed // until user initializes sort delayinit: false, // if true, server-side sorting should performed because // client-side sorting disabled, ui , events // still used. serversidesorting: false, // *** sort options *** // these detected default, // can change or disable them // these can set using data-attributes or class names headers: { // set "sorter : false" (no quotes) disable column 0: { sorter: "text" }, 1: { sorter: "digit" }, 2: { sorter: "text" }, 3: { sorter: "url" } }, // ignore case while sorting ignorecase: true, // forces user have this/these column(s) sorted first sortforce: null, // initial sort order of columns, example sortlist: [[0,0],[1,0]], // [[columnindex, sortdirection], ... ] sortlist: [ [0, 0], [1, 0], [2, 0] ], // default sort added end of users sort // selection. sortappend: null, // starting sort direction "asc" or "desc" sortinitialorder: "asc", // replace equivalent character (accented characters) allow // alphanumeric sorting sortlocalecompare: false, // third click on header reset column default - unsorted sortreset: false, // restart sort "sortinitialorder" when clicking on // unsorted columns sortrestart: false, // sort empty cell bottom, top, none, 0 emptyto: "bottom", // sort strings in numerical column max, min, top, bottom, 0 stringto: "max", // extract text table - how // done default textextraction: { 0: function (node) { return $(node).text(); }, 1: function (node) { return $(node).text(); } }, // use custom text sorter // function(a,b){ return a.sort(b); } // basic sort textsorter: null, // *** widgets *** // apply widgets on tablesorter initialization initwidgets: true, // include zebra , other widgets, options: // 'columns', 'filter', 'stickyheaders' & 'resizable' // 'uitheme' widget, requires loading // different skin , jquery ui theme. widgets: ['zebra', 'columns'], widgetoptions: { // zebra widget: adding zebra striping, using content , // default styles - ui css removes background // default , odd class names included // demo allow switching themes // [ "even", "odd" ] zebra: [ "ui-widget-content even", "ui-state-default odd"], // uitheme widget: * updated! in tablesorter v2.4 ** // instead of array of icon class names, option // contains name of theme. jquery ui ("jui") // , bootstrap ("bootstrap") themes supported. modify // class names used, extend themes variable // "$.extend($.tablesorter.themes.jui" code below uitheme: 'jui', // columns widget: change default column class names // primary 1st column sorted, secondary 2nd, etc columns: [ "primary", "secondary", "tertiary"], // columns widget: if true, class names columns // option added table tfoot. columns_tfoot: true, // columns widget: if true, class names columns // option added table thead. columns_thead: true, // filter widget: if there child rows in table (rows // class name "csschildrow" option) , option true // , match found anywhere in child row, make // row visible; default false filter_childrows: false, // filter widget: if true, filter added top of // each table column. filter_columnfilters: true, // filter widget: css class applied table row containing // filters & inputs within row filter_cssfilter: "tablesorter-filter", // filter widget: customize filter widget adding select // dropdown content, custom options or custom filter functions // see http://goo.gl/hqqlw more details filter_functions: null, // filter widget: set option true hide filter row // initially. rows revealed hovering on filter // row or giving filter input/select focus. filter_hidefilters: false, // filter widget: set option false keep searches // case sensitive filter_ignorecase: true, // filter widget: jquery selector string of element used // reset filters. filter_reset: null, // delay in milliseconds before filter widget starts searching; // option prevents searching every character while typing // , should make searching large tables faster. filter_searchdelay: 300, // set option true if filtering performed on server-side. filter_serversidefiltering: false, // filter widget: set option true use filter find // text start of column. typing in "a" find // "albert" not "frank", both have a's; default false filter_startswith: false, // filter widget: if true, filter searches use parsed // data. use parsed data in specific columns, set option // false , add class name "filter-parsed" header filter_useparseddata: false, // resizable widget: if option set false, resized column // widths not saved. previous saved values restored // on page reload resizable: true, // savesort widget: if option set false, new sorts // not saved. previous saved sort restored on page // reload. savesort: true, // stickyheaders widget: css class name applied sticky header stickyheaders: "tablesorter-stickyheader" }, // *** callbacks *** // function called after tablesorter has completed initialization initialized: function (table) {}, // *** css class names *** tableclass: 'tablesorter', cssasc: "tablesorter-headersortup", cssdesc: "tablesorter-headersortdown", cssheader: "tablesorter-header", cssheaderrow: "tablesorter-headerrow", cssicon: "tablesorter-icon", csschildrow: "tablesorter-childrow", cssinfoblock: "tablesorter-infoonly", cssprocessing: "tablesorter-processing", // *** selectors *** // jquery selectors used find header cells. selectorheaders: '> thead th, > thead td', // jquery selector of content within selectorheaders // clickable trigger sort. selectorsort: "th, td", // rows class name removed automatically // before updating table cache - used "update", // "addrows" , "appendcache" selectorremove: "tr.remove-me", // *** debuging *** // send messages console debug: false }).tablesorterpager({ // target pager markup - see html block below container: $(".pager"), // use url format "http:/mydatabase.com?page={page}&size={size}" ajaxurl: null, // process ajax data object returned along // total number of rows; example: // { // "data" : [{ "id": 1, "name": "foo", "last": "bar" }], // "total_rows" : 100 // } ajaxprocessing: function(ajax) { if (ajax && ajax.hasownproperty('data')) { // return [ "data", "total_rows" ]; return [ajax.data, ajax.total_rows]; } }, // output string - default '{page}/{totalpages}'; // possible variables: // {page}, {totalpages}, {startrow}, {endrow} , {totalrows} output: '{startrow} {endrow} ({totalrows})', // apply disabled classname pager arrows when rows @ // either extreme visible - default true updatearrows: true, // starting page of pager (zero based index) page: 0, // number of visible rows - default 10 size: 10, // if true, table remain same height no matter how many // records displayed. space made empty // table row set height compensate; default false fixedheight: true, // remove rows table speed sort of large tables. // setting false, hides non-visible rows; needed // if plan add/remove rows pager enabled. removerows: false, // css class names of pager arrows // next page arrow cssnext: '.next', // previous page arrow cssprev: '.prev', // go first page arrow cssfirst: '.first', // go last page arrow csslast: '.last', // select dropdown allow choosing page cssgoto: '.gotopage', // location of "output" displayed csspagedisplay: '.pagedisplay', // dropdown sets "size" option csspagesize: '.pagesize', // class added arrows when @ extremes // (i.e. prev/first arrows "disabled" when on first page) // note there no period "." in front of class name cssdisabled: 'disabled' }); // extend themes change of default class names ** new ** $.extend($.tablesorter.themes.jui, { // change default jquery uitheme icons - find full list of icons // here: http://jqueryui.com/themeroller/ (hover on them name) table: 'ui-widget ui-widget-content ui-corner-all', // table classes header: 'ui-widget-header ui-corner-all ui-state-default', // header classes icons: 'ui-icon', // icon class added <i> in header sortnone: 'ui-icon-carat-2-n-s', sortasc: 'ui-icon-carat-1-n', sortdesc: 'ui-icon-carat-1-s', active: 'ui-state-active', // applied when column sorted hover: 'ui-state-hover', // hover class filterrow: '', even: 'ui-widget-content', // row zebra striping odd: 'ui-state-default' // odd row zebra striping });
you have few choices
use css3
text-overflow: ellipsis;(browser support & demo):td { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }the main issue overflowed text hidden, if want user able read text, 1 idea add
td'stitleattribute.or, use css3
word-break: break-all(browser support & demo):td { max-width: 100px; word-break: break-all; }the main issue method text in other cells may break in middle of word instead of @ space.
adjust max-width desired.
Comments
Post a Comment