Datatables get value fron a cell that have an input

Question

Ok, i'm trying to build a custom search, on my Datatables, i have a problem when i try to filter a column that have a selectinside it.

the problem start when i filter with the column 11 that have the next syntax:

<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5" selected="">5</option>
</select>

i use the next function to build a custom filter:

    $.fn.dataTable.ext.search.push(
        function ( settings, data, dataIndex) {
            dataFromFormat = getDataFromFormat( data[11] ); //return 1 2 3 4 5
            stringLike( dataFromFormat, $('#customSearch').val() )
        }
    );



function stringLike(string, substring){
    if (string.indexOf(substring) !== -1) return true
    else return false;
}



function getDataFromFormat(datavalue){
    console.log(datavalue);
    if ( $(datavalue).is('a') ){
        console.log('a');
        return $(datavalue).text();

    } else if ( $(datavalue).is('input') ){
        console.log('input');
        return $(datavalue).val();

    } else if ( $(datavalue).is('select') ){
        console.log('select');
        return $(datavalue).val();

    } else {
        console.log('only text'); //enter here, because data[11] doesn't have the select syntax only the text contained in it (1 2 3 4 5)
        return datavalue;
    }
}

but when i check what i have in my data[11] every time it returns:

1  2 3 4 5

only the text content, but not the HTML tags, and nothing, it should return the select itself, because that's the real content of the column 11.

How can i get the real content, or, how can i get the value from the select

Answer 1

If you just want to extract the values entered in the input boxes, you must go through jQuery or native DOM. dataTables itself is not aware of any changes made to form input fields, so trying to retrieve the values by cell().data() will never work, with or without id's / orthogonal data :

aTable.cell(0,2).nodes().to$().find('input').val() aTable.cell(0,3).nodes().to$().find('input').val()
Will give you the current value of the various inputs. Have replicated your above scenario 100% in this fiddle ->

http://jsfiddle.net/obmghyo7/

This is basically also how the official documentation suggests a way to extract values from form inputs ->

https://datatables.net/examples/api/form.html

If you want to perform filtering / searches within the table, which also includes changes made by the user in form inputs, then it is a little more tricky -> JQuery Datatables search within input and select (mine, but I dont know any better answer)

Answer 2

In your code, you're using return $(datavalue).val(); in both of your else if statements. This will return the value from your select which is why you get 1 2 3 4 5 since these are the values (e.g., value=1) for your select.

I'm not sure what the content is in your selects, but you should be able to use return $(datavalue).text(); or return $(datavalue).html();

function getDataFromFormat(datavalue){
    console.log(datavalue);
    if ( $(datavalue).is('a') ){
        console.log('a');
        return $(datavalue).text();

    } else if ( $(datavalue).is('input') ){
        console.log('input');
        return $(datavalue).text();

    } else if ( $(datavalue).is('select') ){
        console.log('select');
        return $(datavalue).text();

    } else {
        console.log('only text'); //enter here, because data[11] doesn't have the select syntax only the text contained in it (1 2 3 4 5)
        return datavalue;
    }
}

OR

function getDataFromFormat(datavalue){
    console.log(datavalue);
    if ( $(datavalue).is('a') ){
        console.log('a');
        return $(datavalue).text();

    } else if ( $(datavalue).is('input') ){
        console.log('input');
        return $(datavalue).html();

    } else if ( $(datavalue).is('select') ){
        console.log('select');
        return $(datavalue).html();

    } else {
        console.log('only text'); //enter here, because data[11] doesn't have the select syntax only the text contained in it (1 2 3 4 5)
        return datavalue;
    }
}