如何使用 jquery/ajax 刷新 div 中的表格内容

Question

I need your help in order to refresh a div id="mytable" in my html once the function is called from a method. Currently, I am loading the full page once it is called using the below lines.

In my java method, I am using the below line to call a javascript method:

RequestContext.getCurrentInstance().execute("autoRefresh()"); 

The html code :

<script type="text/javascript">
    function autoRefresh() {
        window.location.reload();
    }
</script>

<div id='mytable'>
    <h1 id='My Table'>
        <table></table>
    </h1>
</div>

Answer 1

You can load HTML page partial, in your case is everything inside div#mytable.

setTimeout(function(){
   $( "#mytable" ).load( "your-current-page.html #mytable" );
}, 2000); //refresh every 2 seconds

more information read this http://api.jquery.com/load/

Update Code (if you don't want it auto-refresh)

<button id="refresh-btn">Refresh Table</button>

<script>
$(document).ready(function() {

   function RefreshTable() {
       $( "#mytable" ).load( "your-current-page.html #mytable" );
   }

   $("#refresh-btn").on("click", RefreshTable);

   // OR CAN THIS WAY
   //
   // $("#refresh-btn").on("click", function() {
   //    $( "#mytable" ).load( "your-current-page.html #mytable" );
   // });


});
</script>

Answer 2

use this code

$(".table").load(location.href + " .table");

Answer 3

<div class="card-body">
            <div class="table-responsive">
              <table class="display dataTable no-footer" id="notificationTable" role="grid" aria-describedby="basic-1_info">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th> Title</th>
                    <th> Brief</th>
                    <th>Category</th>
                    <th>To</th>
                    <th>By</th>
                    <th>Edit</th>
                    <th>Delete</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    

                  </tr>
                </tbody>
              </table>
            </div>
          </div>

let notificationTable = $('#notificationTable').DataTable({
      "processing": true,
      // 'scrollX': true,
      "serverSide": true,
      "ordering": false,
      dom: 'Bfrtip',
      buttons: [{
        extend: 'copy',
        exportOptions: {
          columns: '0,1,3,4'
        }
      },
      {
        text: 'CSV',
        className: "csvGenerate",
        action: function (e, dt, node, config) {
          getCSVFile();
        }
      },
      {
        text: 'Excel',
        className: "excelMyButtonsToHide",
        action: function (e, dt, node, config) {
          getExcelFile();
        }
      }, {
        extend: 'print',
        exportOptions: {
          columns: '0,1,3,4'
        }
      },
        'colvis'-
      ],
      language: {
        buttons: {
          colvis: '<span class="icon icon-eye" style="font-size: x-small;"/>'
        }
      },
      'columnDefs': [{
        "visible": false,
        "targets": []
      }],
      "ajax": {
        "url": '/system/admin/notifications/allNotifications?fromDate='+ fromStart +'&toDate=' +endDate +'&orderCol=' + ord + '&column=' + col,
        "type": "GET",
        dataFilter: function (data) {
          responseData = jQuery.parseJSON(data);
          notificationData = responseData.data;
          return JSON.stringify(responseData);
        }
      },
      "columns": [{
        "data": "id"
      },
      {
        "data": "offerTitle"
      },
      {
        "data": "offerBrief"
      },
      {
        "data": "offerCategory"
      },
      {
        "data": "offerTo"
      },
      {
        "data": "offerBy"
      },
      {
        sortable: false,
        "render": function (data, type, full) {
          let buttonID = "edit_" + full.id;
          return '<a id=' + buttonID + ' class="icofont icofont-edit edit"></a>';
        }
      },
        {
          sortable: false,
          "render": function (data, type, full) {
            let buttonID = "delete_" + full.id;
            return '<a id=' + buttonID + ' class=" icofont icofont-trash trash"></a>';
          }
        },


      ],
    });
$('#notificationTable').on('click', 'a.trash', function (row) {

      let rowId = row.target.id;

      selectedId = rowId.split('_')[1]

      Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          axios.delete(`/system/admin/notifications/${selectedId}`).then (function (response){

            $("#addCashback").text("Add").prop('disabled',false)
            if (true){
              //if (response.data.success){
              $("#addNewNotification").modal("hide")
              notificationTable.draw(true)
              notify("Success","Data Saved successfully","success")
            }
            else{
              notify("Error",response.data.errors,"danger")
            }

          })
          Swal.fire(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'



          ).then(function() {
            notificationTable.draw(true);
          });

        }

      })

    });