column min width, ajax loading icon and column drag-drop

[jcorreia]

HI, Great work you have done here !!

I have a doubt. Is it possible to fix only a column to not have less than x% ? I need this because I have a table with some columns that keep compressing one that I want to be the greatest of all. Any way to accomplish this ?

Here are some ideas that could be useful.

1. An ajax loading icon in the middle of the table, for those tables with a lot of records, so we dont see the table rendering.
2. possibility to drag and drop the order of the columns from one place to another.

Thanks and keep the good work :) Jorge Correia

[Mottie]

Hi Jorge!

What do you mean by fix a column? As in sideways scrolling (see issue #135) or fix it's width? If you mean fix the width, try setting the widthFixed option to true.

There is an option named showProcessing which, when true, will add an ajax loading icon to each of the header cells. But the problem is that because of the intensive javascript calculation, the icon doesn't animate (see issue #158). I have tried various methods to remedy that, but nothing seems to work.

Drag and drop sorting of columns is on my to do list (see issue #186), but as it stands now, it would require a complete update of all table contents, which is not very efficient, especially with large tables. It would be better to manipulate the internal cache, and that doesn't seem like an easy task to do. Additionally, right now I don't have the time to work on anything complex other than simple fixes and issue updates.

Thanks for the suggestions though!

[jcorreia]

Hi, thanks for the quick reply. I mean fix the width. I have a column that I would like to a couple of pixels greater than the others. But only one column..or 2 ;) I´ve checked that widthFixed option, but to be honest I didnt understand how to use. I got the notion that it was for the whole table and not a particular column.

As for the drag and drop...just an idea ;)

Thanks, Jorge Correia

[Mottie]

Hi Jorge!

Just set the width of that column. For example:

CSS

th.narrow { width: 50px; }

HTML

<table>
  <thead>
    <th class="narrow">...</th>
    ...
   </thead>
   <tbody>
     ...
   </tbody>
</table>

[jcorreia]

lol..damn you are quick :) Thanks !

Regarding the loading issue I forgot to comment...I did show the show processing in column and that´s very nice, but I am referring to the first time the table is loaded. I´m using bootstrap and have a table with a lot of info (10 columns and 600 lines). As you can imagine the first we enter on this page, it takes a while to tablesorter format the table...that´s normal and it´s at this time the loading of the entire table would be nice. I have implemented this with jquery, and I can share it, but it would be nice if it was already here.

I´ve remembered 2 more features what would made table sorter really perfect (now it´s just perfect :) ), the ability to print or to export to excel, ou cvs.

I´m having a doubt with metadata, but I will open a new issue.

Once again many thanks for this wonderfull job.

[Mottie]

I'm not sure this will work for you, but you could just add a table cell with a loading icon when the table initializes or updates, as shown in the code below. You may need to clear out all other tbodies, and if you do, just uncomment out the clearTableBody function (demo).

CSS (!important flag needed to override the :hover definition)

td.loading-tbody, td.loading-tbody:hover {
    background-image: url(http://mottie.github.com/tablesorter/addons/pager/icons/loading.gif) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

Script

$('table')
  .on('tablesorter-initialized updateComplete update', function (e) {
    if (e.type !== 'updateComplete') {
      // $.tablesorter.clearTableBody(this); // empty out all tbodies within the table
      var $overlay = $('<td/>', {
        class: 'loading-tbody',
        colspan: 4,
        height: '200px'
      })
      .appendTo($(this))
      .wrap('<tbody><tr/></tbody>');
    } else {
      $('.loading-tbody').closest('tbody').remove();
    }
  })
  .tablesorter({
    theme: 'blue'
  });

[jcorreia]

Thanks, I will try your loading solution, and give some feedback.

Regarding the column width didn´t work. I´ve checked with firebug and a style element fixing the width is added to the column, overriding my css. Don´t know if is bootstrap or table sorter who is changing it...

I´m also using tablesorte resizable plugin. Maybe it´s him..and since I´m using it, fixing the size woud be a nice feature to have here.

Thanks, Jorge Correia

[Mottie]

Hi Jorge!

If you are using the resizable widget, then yes it will change the width if you resize it, unless you add a resizable-false class name to the header (added in v2.7.4). Please see the resizable widget demo - recently updated.

[jcorreia]

Hi, I´ve tried that, but the only thing I´ve managed was that particular column from being resized, and What I´m trying to accomplish is a min-width on first load. It didnt work because the style="width: 371.083px;" in the column is still being added from bootstrap or table sorter. If I managed to override that style injection it will work.

[jcorreia]

Hi, after I wrote I thought of a workaround and it worked. I´ve changed width to min-width, and it worked.

th.narrow { min-width: 50px; }

Thanks, Jorge Correia

[thezoggy]

just be careful with min-width if you need to support legacy browsers. see notes: http://caniuse.com/#search=min-width

[jcorreia]

Hi, thanks for link, but i dont see any other solution. Only avoiding whom is adding style to the column... Thanks.

[jcorreia]

thanks