Getting the value from textbox in table

leddy

Hi,

I have a dynamically created table that I am using with DataTables and TableTools - it works great except I have an input textbox that I need to get the value out of when clicking a button, but it just gives me the html, e.g. <input size="3" type="text">

I have created a DataTables live to recreate the issue, but bizarrely I can't get the selecting of the row to work even though it does for me - see here http://live.datatables.net/nexeqesa/1/ - this at least gives an idea as to what I'm trying to do I hope.

Any help would be great, been struggling with this for a while now.

Many thanks

leddy

leddy

Just worked out how to use the debugger http://debug.datatables.net/opetam

leddy

And this is the code for the creation of the table:

// add results to the table

var tr = [];

var sorTable = document.getElementById('tblSORS');

for (var i = 0; i < sorresults.length; i++) {

    tr[i] = document.createElement('tr');
    var tdsorID = document.createElement('td');
    var tdCode = document.createElement('td');
    var tdDesc = document.createElement('td');
    var tdClient = document.createElement('td');
    var tdCreated = document.createElement('td');
    var tdQuantity = document.createElement('td');
    var inputQty = document.createElement('input');

    inputQty.type = "text";
    inputQty.value = "1";
    inputQty.size = "3";



    tdsorID.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_scheduleofratesid').nodeTypedValue));
    tdCode.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_code').nodeTypedValue));
    tdDesc.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_description').nodeTypedValue));
    tdClient.appendChild(document.createTextNode(sorresults[i].selectSingleNode('./itt_clientcontractid.itt_description').nodeTypedValue));
    tdQuantity.appendChild(inputQty);
    tdCreated.appendChild(document.createTextNode(returnDate(sorresults[i].selectSingleNode('./createdon').nodeTypedValue)));


    tr[i].appendChild(tdsorID);
    tr[i].appendChild(tdCode);
    tr[i].appendChild(tdDesc);
    tr[i].appendChild(tdClient);
    tr[i].appendChild(tdQuantity);
    tr[i].appendChild(tdCreated);

    sorTable.getElementsByTagName('tbody')[0].appendChild(tr[i]);
}

var sors = $('#tblSORS').DataTable({
    "destroy": true,
    "info": false,
    "lengthChange": true,
    dom: 'T<"clear">lfrtip',
    tableTools: {
        "sRowSelect": "multi",
        "aButtons": ""
    }

});

// hide scheduleofratesid column

sors.column(0).visible(false);

leddy

Finally worked it out! :)

    var table = $('#tblSORS').dataTable();
    var data = table.$('input').serialize();
    var oTT = $.fn.dataTable.TableTools.fnGetInstance('tblSORS');

    var rows = oTT.fnGetSelectedData();

    if (rows.length > 0) {
        var selectedRows = oTT.fnGetSelectedIndexes();

        selectedRows.forEach(function (i) {

            alert(document.getElementById('tblSORS')
                .rows[i]
                .cells[3]
                .firstChild
                .value
            );

        });

leddy

Spoke too soon :( On testing the selected indexes are incorrect and I'm not sure why - going to have to leave this now as i've spent far too much time on it - if anyone can shed any light on what's happening here (or even help me get the datatables live code working so that the rows are multi-selectable), i would really appreciate it

Many thanks

leddy

leddy

Anyone? Still can't get this working :(