Configure Columns Width, Filter button disappears

xerife

Hi,
I am trying to configure the width columns in database to avoid rows growing to much.
I am using this configuration http://live.datatables.net/moyucek/1/.
If i don´t use { "sWidth": "5%" }, or any other percentage, my Search/Filter is there and works fine.
Link: http://imageshack.com/a/img839/414/r2dj.png
If i use { "sWidth": "5%" }, Search/Filter option disappears of the page.
Link: http://imageshack.com/a/img843/7056/mq26.png
What am i doing wrong?

Rpiechura

That's a very odd problem to have, I'd make sure that you aren't accidentally changing the sDom initialization since if you remove / change where the "f" in sDom is than it changes where it will show up on the window. For example I use "sDom": 'RC<"clear">lrtip', and if I put the f in just after the clear than it goes above, with it at the end of the line it goes to the bottom, order matters. Obviously if you leave the f out like I do, than you're not going to see it anymore because that's what tells the table that you want the search.

Assuming that is correct and you're not changing that at all I don't really know what would change that. I'd use the http://debug.datatables.net/ to give more information on the before and after to see what you may have changed. It's very useful to give more information.

allan

I completely agree with everything @Rpiechura says. I think to be able to offer any direct help we would need a link to a page showing the problem so it can be debugged.

Allan

xerife

Hi, Thanks a lot for replying.
I guess i have setup everything Ok.
For debugging purposes, i don´t have it online.
I am trying to make sort of a todo manager with a list of tasks.
User checks and the task gets done. User can filter by some criteria("Daily", "Weekly") and so on.
It´s supposed to be working offline.
Please download and take a look at my project: https://copy.com/RGigWEYbVxUY

Thanks a lot.

xerife

By the way i configured the initialization in table-managed.js which is in assets>scripts>custom>.
To download the folder as is, just press Save All in Copy website.

Thanks

Rpiechura

If you have a working copy of the table, IE you can at least see the table and data is correctly in it (which you should since you provided screen shots of that state in the original question), than you can use the datatables debugger that I linked earlier. You just take the booklet link, save it as a bookmark and run the code so you see the table. Once the table is on the screen you click the bookmark you made and it detects all tables on the page and creates a link so that we can see the data that is being used without having to download a project or whatever. (The link that I provided gives a slightly better explination of how to use it, I'd really strongly suggest that you look at it and try to figure it out. It gives A LOT of information that is EXTREMELY useful trying to hunt down bugs like this).

That being said, I took a look inside of the project you linked, at least the js file you mentioned and I see some very odd things. For one, you are only ever supposed to use aoColumns OR aoColumnDefs, not both. aoColumns is the more verbose version of aoColumnDefs, it requires things to be exactly correct (the number of columns in the table has to be the exact same as the data) while columnDefs can have a variable length amount of columns and it'll try and figure things out as appropriate.

It also appears to me that you're defining column widths, and than trying to make certain ones sortable?

"aoColumns": [
           { "sWidth": "5%" },
           { "sWidth": "60%" },
           { "sWidth": "10%" },
           { "sWidth": "10%" },
           { "sWidth": "10%" },
           { "sWidth": "5%" },
          { "bSortable": false },
          null,
          { "bSortable": false, "sType": "text" },
          null,
          { "bSortable": false },
          { "bSortable": false },
        ],

Assuming you still want to use aoColumns, the way that you'd do this if I'm understanding it correctly is more like this.

"aoColumns": [
           { "sWidth": "5%",  "bSortable": false },
           { "sWidth": "60%" },
           { "sWidth": "10%", "bSortable": false, "sType": "text" },
           { "sWidth": "10%" },
           { "sWidth": "10%", "bSortable": false },
           { "sWidth": "5%", "bSortable": false },
        ],

The one you defined I'm fairly certain would have been translated to 12 columns, the first 6 of which had sizes and the next 6 of which would have had their sortable features messed with.

Last but not least, while you say that you think you did the initialization correctly, I don't see sDom anywhere in the code that you linked, and that was the crux of the suggestion I had for you initially. It does use defaults if you don't specify something, but if you're having issues with it than you should make sure you're being as verbose as possible with the datatables plugin to try and eliminate the possibly of screwing something up.

xerife

Thanks a lot Rpiechura for take your time and help me out.
I was making things wrong about aoColumns, didn´t knew that.
About the sDom i removed accidentally before update page.
This problem is solved (..when i configure sWidth the filter buttton now is there).

Rpiechura

Glad to hear I could be of some help and that you fixed the issue. Have a nice day =)