Access to Index Columns from Ajax data feed and enabling/disabling columns

jonr

Hi All,

I have a DataTable that is never going to be more that 30 rows long and 5 fields wide of which 3 are editable, length, width and depth.

I am using an idSrc to hold a unique reference.

As part of this key I am including a mnemonic code which tells me whether I need to prompt the user for width and depth field as well as length.

for something that is only measured in metres I only need a length.

using this code, I can filter and show or hide a column:

        var active = table
            .columns(function (idx, data, node) {
                return $.inArray('Active', data) !== -1 ? true : false;
            })
            .data();

I just need 2 things ...

a) how can I traverse the idSrc array for each row and extract the mnemonic (M3,M2 or M)

b) is there anything that I can filter in the same way as the above code so that I can turn cells on or off for editing?

I have read all the docs on columns(), column(), cell(), cells(), rows(), row()

nothing gives a hint of an idea and I can't see in the docs how the above code works, is the default property of a column a show or hide flag?

many thanks

jON

bindrid

you can get all of your data used to create your table by table.rows().data() then you can traverse the column you want such as

var dataArray = table.rows().data();
$.each(dataArray, function(I, item) { var idSrc = item.idSrc; your code here});

unless you purchased the Editor plugin, you will have to add the code your self.
My solution was to add a class on each column that was editable.

Then used an click event on anything with that class. From that point you can create a dialog or make the cell itself editable by creating an input type='text' inside it. Use a blur event to update the data object and the cell.

jonr

Thanks Bindrid, really helpful.

I am planning to buy editor if I can get this all to work but I am worried that its very complex to use for my simple requirements.

I had assumed that I would be able to easily skip through the cells and add a class that would allow the editor (or at least DataTables ) to enable/disable edit for a cell. It is possible to turn off a whole column edit by returning a simple "false" but doesn't seem to by cell.

I am using an excel like tab between cells rather than a click.

is there not a class that I can add that is automatically supported by DataTables, something like "enabled" or "disabled"?

I really don't understand blur at all ..I can't see anything in the docs that will help me with blur. It seems to be something to do with the display of the table rather than cell management.

Is there a control array for the actual cells where I can add a class?

jON

bindrid

http://jsbin.com/yafuvah/edit?html,css,js,output this is one I made a while ago. Its has some of the features you are looking for.

tangerine

@bindrid: couple of questions about your jsbin code:

    var $nr = dt.row.add(["", "", "", "", "", ""]).draw(false).nodes().to$();

What is to$() ?

And what were you intending with the comment " // Puts"?

TIA

bindrid

.to$() if a function Allan added for convince. It takes the html cells returned by nodes() and wraps them in a jquery object.

you mean the function below it? That is what takes each cell in the row and replaces the content with <input type='text'/> with the value in the cell put in the textbox

tangerine

.to$() if a function Allan added for convince.

Thanks. (I guess you mean "convenience".)

you mean the function below it?

No, I meant the comment here:

       $(".editButton span").text("Cancel");
       // Puts
       dt.page("first").draw();

Thank you!

bindrid

No one ever said programmers have to be able to spell. That's my wife's department, she is the teacher.

When you hit the add button, creates the new row on the first page, so if the add is cancelled, I only need to redraw the first page to get rid of it.

bindrid

http://jsbin.com/viyotar/edit?js,output is a different one to play with.

you click on a cell to start, then it uses keydown events to control its behavior for tab, enter and escape key.

tangerine

I admire your expertise. Probably have to steal some of your code....

bindrid

Thank you. That's why I put it out there.

jonr

Hi Bindrid,

thanks for the enlightening example last posted, these two have been useful in me moving forward.

I now have a class "editable" that I can selectively apply to the DataTable()

what surprises me is that it seems to be such a complicated task to process the logic.

Is there really no way, having selected cells that are editable and having added the class "editable" to the table that we can flag up to DataTables() which fields can be input?

handling each cell event in such detail each and every cell thats entered seems a huge amount of coding for such a simple requirement.

And adding an input ... why is that?

as something that is so JQuery biased I am surprised that I can't just do something like

$("#mytable").DataTables().editableClass("editable");

job done !

Can I apply any logic to the cells() collection to skip processing if the class is not set to editable?

Something in a single line of code perhaps?

jON