Combine datatables and a select option

xtlc

I want to combine a select box with information from selected rows in a datatables object. My idea was to:

1. Get value of selected option ( item.id )
2. get serial numbers of selected items in datatables object
3. Create an array that consists of the item.id and the datatables serial [item.id, serial1, serial2 ...] ( changevalues )
4. change the value of the option to the combined value from 3 so it gets transmitted when updateButton is clicked

I succeeded with 1-3 but I made some mistake with 4. I can write the output to the console though. Does someone have an idea for me? Is this a bad idea to do it like this at all?

my select code:

<div class="container">
    <form action="/itemselect" method="post">
        <div class="row">
            <select class="selectpicker form-control" name="updates_list" id="itemSelector">
            {% for item in items %}
                <option value="{{ item.id }}">{{ item.name }}</option>
            {% endfor %}            
            </select>
            <button class="btn btn-default" name="submit" value="submit" id="updateButton" disabled > Submit</button>
        </div>
    </form> 
</div>

my ajax call for the datatables update:

$(document).ready(function() {
function getData() {
    $.ajax({

        url: "/refreshLiveTableRoute",
        success: function (data) {

        // Get Datatable API
        var table = $('#live_table').DataTable();

        // Get IDs of selected rows.
        var selected = table.rows({selected: true}).ids().toArray();

        // Add '#' to the IDs of each row
        selected.forEach(function(part, index) {
          this[index] = '#' + this[index];
        }, selected);


        // Clear table.
        table.clear();

        // Add new row data, draw and stay on same page.
        table.rows.add(data).draw(false);

        // Reselect rows based on ID.
        table.rows( selected ).select();

        // this is to give the selected rows to the update button
        table.on( 'select', function () {
            var rowData = table.rows( { selected: true } ).data();

            var rowSerial = [];
            $.each( rowData , function(i, item) {
                rowSerial.push(item.serial);
            });   


            var e = document.getElementById("itemSelector");
            var selectoption = e.options[e.selectedIndex].value;
            var changevalue = [selectoption,rowSerial]
            console.log(changevalue) // <--- works!

            $("#itemSelector").change(function() {
                $("#itemSelector option[value=selectoption]").val(changevalue);
            } );

        } );
        });
      }
    });
}

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

xtlc

I solved the problem thanks to a buddy of mine and I want to share the answer:
I created a Datatables variable: var datatablesobject = $('#live_table').DataTable( { ...}) and checked if it's sate is selected and if, I attached the value from the select to it:

datatablesobject.on( 'select deselect', function () {
    var rowData = datatablesobject.rows( { selected: true } ).data();

    var rowSerial = [];
    $.each(rowData , function(i, item) {
        rowSerial.push(item.serial);
    });

    var e = document.getElementById("updateSelector");
    var selectoption = e.options[e.selectedIndex];
    var selectoption_value = selectoption.getAttribute("data-value-original");

    var changevalue = {
        uid: selectoption_value,
        serials: rowSerial,
    };

    selectoption.value = JSON.stringify(changevalue);

in the HTML part I created an extra field that I filled in the start with the same value ("data-value-original") and I used the function above to change the original value to have the uid included - this way I could fetch the information after pressing the button.

{% for u in updates %}
   <option value="{{ u.update_id }}" data-value-original="{{ u.shelf_update_id }}">{{ u.name }}</option>
{% endfor %}        

hope that helps someone in the future.