column selector problem
column selector problem

Hi all,
I have tested my selector in the console and this delivers exactly the columns that I want:
$("#actuals tr:not(.even) td:not(:first-child):not(:nth-child(2)")
but when used in the keys definition like this:
columns: 'tr:not(.even) td:not(:first-child):not(:nth-child(2))'
none of my columns are editable.
I suspect that its down to the point at which the selector is being targeted as this works
columns: ':not(:first-child):not(:nth-child(2))'
can anyone please suggest a form that will only allow editing of columns on even bands and excludes columns 0 and 1?
thanks
jON
This discussion has been closed.
Replies
I have now ditched my plans to get this working as I am reverting to hand cranking code to move around the datatable.
With a lot of help from Bindrid and others here I have my table editable and configurable just like a spreadsheet entry with cells skipped where not set to a class of "editable".
I have 2 final issues to address.
I have removed the focus from the cells in css so that I just get my data cell to click on and then tab between cells.
However, I can only navigate on the current page with tab but what I would like to do is to tab off the last editable cell and for the page to change to page 2. When I tab off the end of page 2 I'd like to go back to the start of page 1 again. Is this possible?
Also, my DataTable appears to be responsive (its inside a boostrap modal dialog). Each time I move to a new cell, all the columns adjust witdth.
Its a bit disconcerting and not very like a fixed column spreadsheet and there is plenty of room available, there are only 6 columns in all.
can anyone advise, is there a short way to stop this from occuring, or do I have to revert to css and give everything a fixed width?
thanks
jON
It should be perfectly possible - you just need to use the API rather than using the DOM directly. Keep in mind that DataTables will remove elements from the document that it doesn't need, so you would first need to check if there is a next page, then change the page and finally focus on that cell.
This isn't going to work because your select is not selecting columns - it is selecting rows and cells (based on the fact that
tr
is being used). Thekeys.columns
selector is a column selector - it is specifically limited as the name suggests to selected based on the columns only. For example, to not select the first or second child:Live example: http://live.datatables.net/goqicizu/1/edit
We'd need a link to a page demonstrating the issue please.
Thanks,
Allan
Thanks Allan,
With regards the selector, I have now dropped the idea of using this although I do understand the problem for when I use this next.
I have a demo page online at:
http://planning.ferns-surfacing.co.uk/Actuals.aspx
fields that have a dash in are not editable and only the actual measures bands are editable.
thanks
jON
Thanks - I see. I what you've tried to do with the selector. Perhaps one idea would be to change the colour of the focus when the editing can be used and have it, e.g. hashed red, when the cell can't be edited. That way you could still use KeyTable that then needing to reimplement that logic yourself.
Regarding the responsive nature, that's happening because the model container has a fixed width:
Allan
With regards selector, are you saying that I could avoid hand cranking?
Currently I only allow editing of cells which have class "editable", is there a way with keytables to stop an edit being allowed if the class is not editable?
With regard the styling ... if I disable that style in the chrome developer, it still has the same behaviour but also is a thinner table !?
jON
Instead of assigning the
keys.editor
option to have KeyTable automatically start editing, listen forkey
and callinline()
yourself. That is basically all KeyTable is doing.I don't think the
responsive
option is enabled for your table, even although the Responsive extension is being loaded.Allan
Thanks Allan,
responsive - is that a bug or is it not going to be possible to fix? i.e. do I have to use a standard div and not Bootstrap Modal?
jON
It should be fixable. Try enabling the
responsive
option.Allan
I turned it on like this:
but behaves the same.
jON
It still appears to have a fixed width for the modal:
Try changing the
width
tomax-width
.Allan
That has the same effect previously.
I get a scrunched up modal with a table inside and the longer, text based, columns are wrapped onto 3 lines of text.
Edit boxes are still switching to almost exactly twice the size when being edited as when simply being in the TD.
I think I am going to drop the idea of getting this to work inside a Bootsrap Modal dialog and rever to the old method of an overlay div with left and right margins set to auto as a container.
This is all taking far too long for the small amount of benefit.
thanks for your help Allan.
regards
jON
Indeed that is not even going to work.
I have created a page from scratch with the bare minimum that I should need I think.
This page is not responsive in any way shape or form as far as I can see.
http://planning.ferns-surfacing.co.uk/Actuals2.aspx
There is something really strange going on with the change of an editable field when selected.
The input makes the td grow to almost twice the size of the original.
I seem to be going backwards with this ... from what looked pretty impressive when I first dropped a table into a Modal Dialog and now weeks later and I still don't have a usable DataTable.
Can anyone suggest what is going wrong please?
jON
These "double" references are probably not helping:
jquery/3.1.1/jquery.min.js
jquery-1.12.4.js
and
cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
cdn.datatables.net/1.10.14/css/jquery.dataTables.min.css
I was careful to get rid of all the bootstrap twoddle, didn't notice that I had duplicated versions etc.
thanks tangerine.
I will see what it looks like after I tidy up.
Think perhaps I should have taken Allans suggestion to build a fresh package, sorry Allan :-)
jON
I have removed all recently added code, used only DataTables js and css and everything is working as it should.
The code that I cribbed from these forums was placing an input into the td for user entry and that was causing the cell to adjust to almost twice the size.
with only DataTables css in place on a clean fresh web site this code will produce the effect I was seeing.
I also checked thoroughly, the class editInput does not have any styling within my files.
jON
I have now completed building the table in to a BootStrap Modal dialog without any problems with formatting or resposive like behaviour, I am very please with the look feel and operation.
http://planning.ferns-surfacing.co.uk/tezting/Actuals3.aspx
One minor issue still haunts me is the excel like tab between cells will always drop on a cell that is configured as not editable via the editable class.
I believe that this:
will allow edits to columns 2, 3, 4 and 5 but only if the class is editable.
however, its still possible to tab to and click on a cell to edit, regardless of whether it has class editable or not.
I am not sure that there is a way around this without copious amounts of awkward code and I am wondering whether I should just leave it as it is and let the user know that data entered into those fields will not be sent back to the server.
I could just zap the field data if they enter something in that cell perhaps?
Any ideas anyone
thanks
jON
Actually, its because the class is
editable
(assuming your listener is looking for that) that editing is allowed on them. The line of code above will add the classeditable
to cells in those four columns. It doesn't do anything else and DataTables or Editor themselves do not look for that class.Since you want to skip some rows (which KeyTable wasn't really designed to do), the only thing I can think of is to use the
key-focus
event. If it focuses on a cell that you don't want to have focus, bump the focus on to the next cell.Allan
Hi Allan,
I think I will probably adopt your earlier suggestion to colour the cells that cannot be entered a red colour.
The problem with an excel like navigation is that I would have to cater for arrow keys as well and it starts to get messy.
A spreadsheet doesn't hide cells that you must not enter.
I may listen out for the event and set the table value to empty as well.
I have to say I am thrilled to see the table working in the bootstrap modal dialog.
and its behaving just as I expected it to.
jON