<form id="data_form">
  <input type="text" name="query"/>
  </form>
  <script>
     var net;
     var grid = new tui.Grid({
         //...options...
     });

     // Activate 'Net' addon
     grid.use('Net', {
        el: $('#data_form'),
        initialRequest: true,
        readDataMethod: 'GET',
        perPage: 500,
        enableAjaxHistory: true,
        withCredentials: false,
        api: {
            'readData': './api/read',
            'createData': './api/create',
            'updateData': './api/update',
            'deleteData': './api/delete',
            'modifyData': './api/modify',
            'downloadExcel': './api/download/excel',
            'downloadExcelAll': './api/download/excelAll'
        }
     });

     // Bind event handlers
     grid.on('beforeRequest', function(data) {
         // For all requests
     }).on('response', function(data) {
         // For all response (regardless of success or failure)
     }).on('successResponse', function(data) {
         // Only if response.result is true
     }).on('failResponse', function(data) {
         // Only if response.result is false
     }).on('errorResponse', function(data) {
         // For error response
     });

     net = grid.getAddOn('Net');

     // Request create
     net.request('createData');

     // Request update
     net.request('updateData');

     // Request delete
     net.request('deleteData');

     // Request create/update/delete at once
     net.request('modifyData');
  </script>