jQuery Datatables responsive example

by martinradio

HTML

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<div id="upload-1" class="card ml-5 mr-5 mt-5 uploadCard ">
                <!-- Header -->
                <div class="card-header expandable">
                    <a data-toggle="collapse" href="#collapse-example-1" aria-expanded="false" aria-controls="collapse-example-1" class='collapsed' id="heading-example-1" >
                        <i class="rotate fa fa-chevron-down "></i>
                        uploadTitle
                    </a>

                    <a style='cursor: pointer;'  data-toggle="modal" data-target="#deleteModal" onClick='deleteUpload("upload-1")' > 
                        <i style='color:red' class="fa fa-close pull-right"></i>
                    </a>
                </div>


                <!-- Body -->
                <div id="collapse-example-1" class="collapse" aria-labelledby="heading-example-1">
                    <div class="card-body">
                        Table:
                        <!-- files table -->
                        <table id="upload_1_table" class="display filesTable" cellspacing="2" width="100%">
                        <thead>
                            <tr> //order, select, audioFilename, audioFormat, audioLength, Image, videoOutput, videoFormat
                                <th class='order'>#</th>
                                
                                <th>image</th>
                               
                               ...

CSS

table th:nth-child(3), td:nth-child(3) {
  display: none;
}

JavaScript

$(document).ready(function() {
    var upload_table = $(`#upload_1_table`).DataTable({
            columnDefs: [ 
                
            ],
            responsive: true,
            data: [
                    [
 4, 
            "<input type='checkbox'>", 
            "11. Im Tevakshi.flac", 
            "flac", 
            2.82, 
            "<select name='cars'><option value='back.jpg'>back.jpg</option><option value='front.jpg'>front.jpg</option></select>", 
                    ],[
 4, 
            "<input type='checkbox'>", 
            "11. Im Tevakshi.flac", 
            "flac", 
            2.82, 
            "<select name='cars'><option value='back.jpg'>back.jpg</option><option value='front.jpg'>front.jpg</option></select>", 
                    ],
           
            
            ],
            "dom": "t",
            select: {
                style: 'multi',
                selector: 'td:nth-child(2)'
            },
            rowReorder: true,
            
            rowReorder: {
                selector: 'td:nth-child(1)'
            }
        });
        
        
        
        //image selection changed
        $('#upload_1_tableImageSelectionColHeader').change(function(e) {
            console.log(`upload-1-imageOptionsCol clicked`)
            
           
            upload_table.rows().eq(0).each( function ( index ) {
                var row = upload_table.row( index );
             
                var data = row.data();
                //console.log("row = ", row)
                console.log("data = ", data)
                data[2] = 'ex'
            } );
            
            upload_table.draw();
        });
        
} );