Nicholas Roeder Nicholas Roeder - 2 months ago 19
jQuery Question

Datatable only first row receives jquery var

Only the first row in my data table receives my var sel.

The var is given values from a html dropdown. If you click the print button on the first row the var is passed to the url. If you change the select options the var is updated.

If you click any other row the var comes across as undefined.

<script type="text/javascript">
function datatableHandler ( sel)
{
$('#workorder').DataTable().destroy();

var table = $('#workorder').DataTable({
//display columns
"columns": [
//display action buttons
{"mData": "idWorkOrder",
"mRender": function (data, type, row) {
return '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+
'<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
'<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
}
},
{"data": "cFirstName"},
{"data": "cLastName"},
{"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
{"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
{"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
],
"processing": true,
"serverSide": true,
"responsive": true,
"ajax": {
url: 'datatables.php',
type: 'POST'
}
});
table.draw( false );
}
$(document).ready(function () {
$('#multipleSelect').on('change', function() {
sel = $(this).val();
console.log(sel);

datatableHandler (sel);
});
$('#workorder').DataTable().destroy();

var table = $('#workorder').DataTable({
//display columns
"columns": [
//display action buttons
{"mData": "idWorkOrder",
"mRender": function (data, type, row) {
sel=1;
return '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+
'<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
'<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
}
},
{"data": "cFirstName"},
{"data": "cLastName"},
{"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
{"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
{"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
],
"processing": true,
"serverSide": true,
"responsive": true,
"ajax": {
url: 'datatables.php',
type: 'POST'
}
});
table.draw( false );

});
</script>

Answer

You need to call your datatable function on change event so that datatable will get updated value of sel.

I have just call the datatableHandler function on change event of multi select and pass value sel to that function.

     <script type="text/javascript">


            function datatableHandler (var sel) {
// destroy the datatable

 $('#workorder').DataTable().destroy();

          var table = $('#workorder').DataTable({
                            //display columns
                            "columns": [
                                //display action buttons
                                {"mData": "idWorkOrder",
                                    "mRender": function (data,  type,  row) {
                                    return  '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+
                                            '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
                                            '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
                                    }
                                },
                                {"data": "cFirstName"},
                                {"data": "cLastName"},
                                {"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                {"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                {"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
                            ],
                            "processing": true,
                            "serverSide": true,
                            "responsive": true,
                            "ajax": {
                                url: 'datatables.php',
                                type: 'POST'
                                }
                        });
                        table.draw( false );
                    };     

             $(document).ready(function () {
                            var sel;
                            $('#multipleSelect').on('change', function() {
                               sel = $(this).val();
                                console.log(sel);

                               //call datatable handler function with value sel
                                 dataHandler (sel);
                            });
                  });
    </script>
Comments