CODEWITHSUNDEEP
jquerydatatabledatatables
Nuñito Calzada
Nuñito Calzada

Reputation: 2086

datatable: Javascript sourced data not working

I want to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document using DataTables (a plug-in for the jQuery Javascript library)

I have this table

var dataSet = [
                  ['IOS-LSLSLS','PRODUCT-NAME','CATEGORY','MANUFACTURER','COUNTRY','RETAILER1, RETAILER2'],
                  ['ANDROID-LSLSLS','PRODUCT-NAME2','CATEGORY2','MANUFACTURER2','COUNTRY2','RETAILER31, RETAILER32']];


oTable = $('#devicesDatatableId').dataTable( {
                    "stateSave": true,
                    "bStateSave": true,
                    "data":  dataSet,        
                    "sScrollY": "auto",
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bPaginate": true,
                    "bLengthChange": true,
                    "bFilter": true,
                    "aaSorting": [[ 0, "asc" ]],
                    "aoColumnDefs": [
                                    { "bSortable": false, "asSorting": [ "asc" ], "sWidth": "15%", "aTargets": [ 0 ] },
                                    { "sWidth": "20%", "aTargets": [ 1 ] },
                                    { "sWidth": "10%", "aTargets": [ 2 ] },
                                    { "sWidth": "20%", "aTargets": [ 3 ] },
                                    { "sWidth": "15%", "aTargets": [ 4 ] },
                                    { "sWidth": "20%", "aTargets": [ 5 ] }
                                ],
                    "bSort": true,
                    "bInfo": true,
                    "bAutoWidth": true,
                    "bSortCellsTop": true,
                    "sDom": 'tlpi<"clear">',

                });

and

<table cellpadding="0" cellspacing="0" border="0" class="display normaltable" id="devicesDatatableId">
                                <thead>
                                    <tr>                            
                                        <th >Model</th>
                                        <th >Product name</th>
                                        <th >Category:</th>                                         
                                        <th >Manufacturer:</th>
                                        <th >Country(ies):</th>
                                        <th >Retailer(s):</th>
                                    </tr>
                                    <tr class="thefilters">                         
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>                                          
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                        <td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Model</th>
                                        <th>Product name</th>
                                        <th>Category:</th>
                                        <th>Manufacturer:</th>
                                        <th>Country(ies):</th>
                                        <th>Retailer(s):</th>
                                    </tr>
                                </tfoot>
                                <tbody/>    
                            </table>

But no data appears in the table

Upvotes: 0

Views: 186

Answers (1)

markpsmith
markpsmith

Reputation: 4918

Remove the double quote from the end:

var dataSet = [['IOS-LSLSLS','PRODUCT-NAME','CATEGORY','MANUFACTURER','COUNTRY','RETAILER1, RETAILER2'],
             ['ANDROID-LSLSLS','PRODUCT-NAME2','CATEGORY2','MANUFACTURER2','COUNTRY2','RETAILER31, RETAILER32']];

Here is a working version: jsfiddle

Upvotes: 1

Related Questions