Answers

• tangerine Posts: 3,365Questions: 39Answers: 395

  January 2018

  Your button code belongs in your DataTables initialization script, not the server-side script. Look up columns.render in the docs.
• JayDude Posts: 3Questions: 1Answers: 0

  January 2018

  Thank you @tangerine after reading up on columns.render from DataTable, it does look like you have put me on the right track, but I am at a loss, I dont know how to call the function of the button in the table.
• tangerine Posts: 3,365Questions: 39Answers: 395

  January 2018 edited January 2018

  Look for this example in the docs:
  Use as a function to create a link from the data source
  which shows how to incorporate a link in your data cell.
  Just adapt the code to return your preference for anchor or button.

  https://datatables.net/reference/option/columns.render
• JayDude Posts: 3Questions: 1Answers: 0

  January 2018

  Hi @tangerine I am proficient in php, css sql among others, but ajax and javascript gets the better of me. Maybe you can make heads of what I need to do. This is my javascript that worked on the original "<td...>" line, before turning over to server-side processing. It actually adds an item to a quote from the inventory when clicked:

  <script>
  $('.button_add').click(function() {
      var data = $(this).attr('id');
      $.ajax({
          type: "POST",
          url: "insert/add_item_test.php",
          data: {id: data},
          beforeSend: function(){
          
          },
          success: function(){
              $('#table_refresh').load('insert/table_load_test.php').fadeIn("slow");
          },
          error: function(){
              alert("OOPS - Something went wrong, try again");
          }
      });
  });
  </script>
  

  I do not know or understand how to integrate it with the Server-Side Script:

  <script>
  $(function () {
    $('#itemlist').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "processing": true,
      "serverSide": true,
      "ajax": "../serverSide/serverProcessing.php"
    });
  });
  
  $(document).ready(function() {
      
      $('#itemlist tfoot th').each( function () {
          $('#itemlist tfoot th').appendTo('#itemlist thead');
          var title = $(this).text();
          $(this).html( '<input type="text" style="column-width:!important; width:100%" placeholder="Search " />' );
      } );
   
      // DataTable
      var table = $('#itemlist').DataTable();
   
      // Apply the search
      table.columns().every( function () {
          var that = this;
   
          $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                  that
                      .search( this.value )
                      .draw();
              }
          } );
      } );
  } );
  </script>
  

  I have placed the "<td...>" line inside the database, which shows the button perfectly but with no functionality.
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  January 2018

  Change your success callback to be $('#itemlist').DataTable().draw();. That will reload the data for the table being shown (since you have server-side processing enabled).

  Allan