@extends('layouts.main')

@section('container')
<div class="card">
    <div class="card-header">
      <table width="100%">
        <tr>
          <td><h3 class="card-title">List</h3></td>
          <td align="right" style="margin-right: 5px"><a href="{{ route('admin.uom.create') }}" class="btn btn-success btn-sm"><i class="fa fa-plus" style="margin-right:5px"></i>Add New</a></td>
        </tr>
      </table>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
      <div class="scroll-x-table">
        <table class="table table-bordered table-striped table-condensed admin-datatable" data-ajax-context="uoms" data-ajax-url="{{ route('admin.uom.ajax.list') }}" id="dt_table" width="100%">
          <thead>
              <tr>
                <th width="10">No</th>
                <th>Nama</th>
                <th>IsActive</th>
                <th width="80"></th>
              </tr>
          </thead>
          <tbody>
          </tbody>
        </table>

        <br>
      </div>
    </div>
    <!-- /.card-body -->
  </div>
  <!-- /.card -->


  <!-- /.modal -->
@endsection



@section('javascript')

<script>
  $(function () {
    // showDataTable();
  })

  function showDataTable(){
    $("#dt_table").dataTable().fnDestroy();
    $('#dt_table').DataTable({
        "lengthChange": true,
        "searching": true,
        // 'scrollX': true,
        // 'scrollCollapse' : true,
        'processing': true,
        'serverSide': true,
        "columnDefs": [{
            "targets"  : 'no-sort',
            "orderable": false,
        },
        { className: 'text-center', targets: [] },
        { className: 'text-left', targets: [] },
        { className: 'text-right', targets: [] },
        ],
        "order": [[ 1, "asc" ]],
        ajax: {
            url: "{{ route('admin.uom.ajax.list')  }}",
            type:'GET',
        }
    });
  }

</script>


@endsection