Define column headers with ajax

TobyDS

I currently have an AJAX file that feeds in the data to my table but I also want to define the tables in the ajax page. How would this be possible?. Alternatively, could I destroy two columns from my table from the ajax page?

Thanks for the help,
Toby

colin

Hi @TobyDS ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

TobyDS

Thanks @colin ,

So for example I have a table with 5 table headers: Name, Year, Michelmas Sport, Lent Sport and Summer Sport. These are defined on my index.php page as such:

<thead>
  <tr>
    <th width="20%">Name</th>
    <th width="10%">House</th>
    <th width="10%">Year</th>
    <?php
      try{
        $stmt = $conn->prepare("SELECT * FROM Term");
        $stmt->execute();
        while ($row =$stmt->fetch(PDO::FETCH_ASSOC)){
          echo '<th width="20%">'.$row['Name'].' Sport</th>';
         }
       }
      catch(PDOException $e)
      {
        echo "error".$e->getMessage();
      }
    ?>
  </tr>
</thead>

However the data in my table is posted using the in built data function. code for my datatable function is bellow

$(document).ready(function(){
  var dataTable=$('#example').DataTable({
   "processing": true,
              "serverSide":true,
              lengthMenu: [[10, 25, 100, 5000], [10, 25, 100, "All"]],
              pageLength: 10,
              "ajax":{
                url:"ajax2.php",
                type:"post",
                "data": function ( d ) {
                d.filter_sport = $('#filter_sport').val();
                d.filter_term = $('#filter_term').val();
                d.filter_sex = $('#filter_sex').val();
                d.filter_year = $('#filter_year').val();
                d.filter_house = $('#filter_house').val();
              },
              dataType: 'json',
              },
etc...

Because I am using filter to filter for things like term I want to remove the rows for the other terms when I use that filter. So if I filter for summer term the colums for michelmass and lent will disappear. So is there a way to post the colums from the ajax page so that I can define them based on the term posted to that page.

kthorngren

Here is an example I've posted in other threads:
http://live.datatables.net/huyexejo/1/edit

You will need to remove ajax from the Datatables init code and use jQuery's ajax. The reason is that the column information needs to be built before initialization of Datatables.

Kevin

TobyDS

@kthorngren that makes sense but I have no clue how to get that working especially considering I have to pass data from forms and whenever the forms are selected resubmit the ajax request. This is what I tried but I'm not even getting a request sent through:

var columns = [];

    function getDT() {
      $.ajax({
        url: "ajaxfile.php",
        type:"post",
        var data = $('filter_sport').serialize();
        $.post('url', data);
        var data = $('filter_term').serialize();
        $.post('url', data);
        var data = $('filter_sex').serialize();
        $.post('url', data);
        var data = $('filter_year').serialize();
        $.post('url', data);
        var data = $('filter_house').serialize();
        $.post('url', data);
        success: function (data) {
          data = JSON.parse(data);
          // columnNames = Object.keys(data.data[0]);
          // for (var i in columnNames) {
          //   columns.push({data: columnNames[i],
          //     title: capitalizeFirstLetter(columnNames[i])});
          // }
            $('#example').DataTable( {
            data: data.data
                // columns: columns
          });
        }
      });
    }

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    $(document).ready(function() {
      getDT();
    });