jQuery DataTables – Form inputs with Responsive extension

Example for article at http://www.gyrocode.com/articles/jquery-datatables-form-inputs-with-responsive-extension/

by samu_eyes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/r/dt/dt-1.10.9,r-1.0.7/datatables.min.css">
<script src="https://cdn.datatables.net/r/dt/dt-1.10.9,r-1.0.7/datatables.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dashboard</title>
</head>

<body>
    <section>
        <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingBPJS">
                      <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseBPJS" aria-expanded="true" aria-controls="collapseBPJS">
                          <span class="pull-right">
                            <p>Pengaturan Harga</p> <i class="drop-arrow m-arrow-down"></i>
                          </span>
                          <span class="title">BPJS</span>
                        </a>
                      </h4>
                    </div>
                    <div id="collapseBPJS" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBPJS">
                      <div class="panel-body">
                        <table id="bpjs" class="display" cellspacing="0" width="100%">
                          <thead>
                            <tr>
                              <th>Jenis</th>
                              <th>Admin Fee(Rp)</th>
                              <th>Total Komisi (Rp)</th>
                              <th>Komisi Saya (Rp)</th>
                              <th>Sisa Komisi Agen(Rp)</th>
                            </tr>
                            </thead>
                            <!-- <tfoot>
                              <tr>
                              <th>Jenis</th>
                              <th>Admin Fee(Rp)</th>
                             ...

JavaScript

$('#bpjs')
        .addClass( 'nowrap' )
        .dataTable( {
          responsive: true,
          paging: false,
          bInfo : false,
          columnDefs: [
            { targets: [-1, -3], className: 'dt-body-right' }
          ]
        } );