Codeigniter Submit Ajax Result Via Button to Datatable Not Working

Question

I'm currently using Codeigniter and using Ajax to post my search result through the server and result the result and display on my responsive datatable. However the result was not added into my datatable and i even try to add it with .append but it just added below my table and the search function on datatable is not searching it and it still show "No data available in table".

Here are my View :

<div id="reporting" class="container">
  <h3 class="section-title">Export Time Location Panel</h3>
  <form id = "search">
    <div class="form-group">
        <div class="form-group">
            <h5>Date/ Time</h5>
              <input type="datetime-local" name="datetime" id = "datetime">
            <?php echo form_error('datetime'); ?>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Confirm</button>
  </form><br/>
         <table class="table table-bordered table-light" >
      <thead>
      <tr>
        <td class="id">ID</td>
        <td class="na">NA Name</td>
        <td class="centre">Centre Name</td>
        <td class="login">Date & Time</td>
        <td class="lat">Latitude</td>
        <td class="long">Longtitude</td>
        <td class="accuracy">Accuracy</td>
        <td class="place">Location Name</td>
      </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
  </div>
</div>
<?php include('footer.php'); ?>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        var tbl = $('.table').DataTable({
            responsive: true,
            "order": [[0, "desc"]]
        })

         $( "#search" ).submit(function(event) {
         event.preventDefault();
         var value  = $("#datetime").val();
             $.ajax({
                    type:'POST',
                    url:'<?php echo base_url(); ?>location/search_record',
                    data:{'datetime':value},
                    success:function(data){
                        $('.table').append(data);
                    }
                });

        });
    } );
</script>

Here are my Model :

    public function search_record(){ //Display Record at View Page
    $this->load->model('location_model');
        $this->load->library('form_validation');

        echo '
  <tr>
        <td class="id">ID</td>
        <td class="na">NA Name</td>
        <td class="centre">Centre Name</td>
        <td class="login">Date & Time</td>
        <td class="lat">Latitude</td>
        <td class="long">Longtitude</td>
        <td class="accuracy">Accuracy</td>
        <td class="place">Location Name</td>
      </tr>

        ';

    }

Yasser Mas · Accepted Answer · 2019-08-21 17:33:50Z

1

You have to add data to table body by

success:function(data){ tbl.rows.add($(data)).draw(); }

Please check this link

https://jsfiddle.net/kuLcqwav/3/

https://datatables.net/examples/api/add_row.html

edited Aug 21, 2019 at 17:33

answered Aug 21, 2019 at 17:22

Yasser Mas

1,6821 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Marcus Tan Over a year ago

i did try the append, but it just adding at the bottom of the datatable instead of the table inside it self, the link using different way to draw right

Yasser Mas Over a year ago

Try this success:function(data){ tbl.rows.add($(data)).draw(); }

Marcus Tan Over a year ago

why does if i use to add 3 more row from the echo, the datatable prompted error?

Marcus Tan Over a year ago

i add like this <tr> <td >2</td> <td >NA Name</td> <td >Centre Name</td> <td >Date & Time</td> <td >Latitude</td> <td >Longtitude</td> <td >Accuracy</td> <td >Location Name</td> </tr> <tr> <td >3</td> <td >NA Name</td> <td >Centre Name</td> <td >Date & Time</td> <td >Latitude</td> <td >Longtitude</td> <td >Accuracy</td> <td >Location Name</td> </tr>

Marcus Tan Over a year ago

how if i wanted to return multiple row in the model and append into the datatable?

|

Collectives™ on Stack Overflow

Codeigniter Submit Ajax Result Via Button to Datatable Not Working

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related