Resposive DataTable In JSP/HTML

Steps To Add Data Table and Make Responsive :-

•  Add these Css File into your JSP/HTML -

             <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css" />

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css" />

   

           

    Note:- Google with exact name of css  you will file cdn link ,download or link cdn in your jsp/html files

       

• Add these Javascripts File into your JSP/HTML -

            <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

            <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

           <script src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>

          <script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>

      

     Note:- Google with exact name of  Javascript, you will file cdn link ,download or link cdn in your jsp/html files

• Add Custom Javascript for ypur DataTable

      $(document).ready(function() {

    var table = $('#example').DataTable( {

        rowReorder: {

            selector: 'td:nth-child(2)'

        },

        responsive: true

    } );

} );




Note- Repace #myTable with your unique DataTable ID

• Example to DataTable
• <table id="example" class="display nowrap" style="width:100%">
•         <thead>

            <tr>

                <th>Seq.</th>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>2</td>

                <td>Tiger Nixon</td>

                <td>System Architect</td>

                <td>Edinburgh</td>

                <td>2011/04/25</td>

                <td>$320,800</td>

            </tr>   

         </tbody>

         </table>

• All Done. You Will See + Sign beside Seq Column if screen size is small, you can customize

      in JavaScript the column  number to change + Sign. 

• For Any Query, Please comment