JSFiddle - React, Tailwind, and code Playground

by edos

HTML

<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table id="table1" class="table table-bordered table-striped display mbuhsakarepku" width="100%" cellspacing="0">
  <thead>
    <tr>
        <th>Action</th>
        <th>Tgl. Nota</th>
        <th>No. Nota</th>
        <th>Supplier</th>
        <th>Tgl. Terima</th>
        <th>Hrg. Total Nota</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript

var table = '';
$(document).ready(function(){
	table = $('#table1').DataTable({
    dom 		: 'lrtp',
    serverSide	: true,
    deferRender : true,
    select 		: true,
    ajax 		: {
      url			: 'https://api.myjson.com/bins/yfg2t',
    },
    scrollY 	: 220,
    scrollX 	: true,
    scroller 	: {
      loadingIndicator: true
    },
    stateLoadParams: function (settings, data) {
      for (var i = 0; i < data.columns.length; i++) {
        data.columns[i].search.search = "";
      }
    },
    columns		: [
        {
          "data" : "edit",
          "orderable" : false,
          render : function(data, type, row) {
            return "<div class='btn btn-xs btn-warning' data-toggle='tooltip' data-placement='bottom' title='Update' onclick='update(this,"+JSON.stringify(row)+")' data-message='"+data+"' data-tipe='header'><i class='fa fa-pencil'></i></div>";
          }
        },
        {
          "data" : "tglnota",
          "className" : "menufilter numberfilter"
        },
        {
          "data" : "nonota",
          "className" : "menufilter textfilter"
        },
        {
          "data" : "suppliernama",
          "className" : "menufilter textfilter"
        },
        {
          "data" : "tglterima",
          "className" : "menufilter numberfilter"
        },
        {
          "data": "hargatotal",
              "className": "text-right menufilter numberfilter"
        },
    ]
  });
});

function update(e, data){
  var message = $(e).data('message');
  var tipe = $(e).data('tipe');
  if(message == 'edit') {
  	//please look on your console tab while inspecting element
    //click on action button that has tgl.terima null
    //if object[0] array length is 1 then it can be scrolled to
    //otherwiser it cant be scrolled to
    //it is happen because the index i want to be scrolled to is on page 2
    //any solution? thankyou
    console.log(table.row(10).scrollTo()); //this code can be done
		//console.log(table.row(100).scrollTo());...