asked on

DataTables: adding a class row to filter data

Hi
I'm trying submit a form and return data in JSON building a DataTable

Within the JSON call back I'm accessing 1 of the data columns to add a class to the row and push the unique class into an array
I then need to build Filter Buttons from the array

Please not: the code bellow has been copied from a closed system so may contain typo's

In my actual code the datatable loads but you have to submit the form twice to build the buttons

I haven't been able make the fitter work either

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


var CodeArray=[];
$(function(){

    // Bind the <a> click event
    $('#MyForm').submit(function() {
        e.preventDefault();

    // Set up the DataTable
    $('#dTable').DataTable({
        // Specify your column data
        "columns": [{ "data": "name" }, { "data": "Lat" }, { "data": "Long" },{"data" : "code"}, { "data": "url" }],
        // Set up the AJAX Datasource
        "ajax": {
            "url": "data.json",
            "dataSrc" : function (json) {
                // Manipulate the returned data before rendering it
                $.each(json, function(i, item) {
                    item.id = item.id * 2;
                    item.name = item.name.toUpperCase();
                    item.url = "<a href='" + item.url + "'>" + "Click Me" + "</a>";
                CodeArray.indexOf(item.code) === -1? CodeArray.push(item.code) : consolle.log(item.code + " Exists"); 
                });

                return json;
            },
            error: function(xhr, status, error) {
                // Add some AJAX Error handling
                console.log("We have an error!");
                console.log(status);
                console.log(error);
            }
        },
        "createdRow": function ( row, data, index ) {
            // Add an class to each <tr>
            $(row).addClass(data.code);
        },
        scrollY : '200px', 
        scrollCollapse: true,
        paging: false,
        searching: false,
        info: false,
        bDestroy : true
    });

  $.each(CodeArray, function(index, code){
   var btn = $("<input />",{
          type  : "button",
                  value : code,
                  id  : "btn_"  + code,
                  on  : {
                click : function(){
                      alert("Hello Code" + code);
                     // allert box shows if submit form twice
   //                     $.fn.dataTable.ext.search.push(
   //   			function(settings, data, dataIndex) {
    //                    return $(table.row(dataIndex).node()).hasClass(code);
    //                  } );
  ///                DataTable.Draw();
          }
      }
   });
   
  $("#FilterButs").appendTo(btn);
  });
    });// End form submit
 });

Open in new window

ASKER CERTIFIED SOLUTION

zephyr_hex (Megan)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trevor1940

ASKER

Not easily
Due to needing to submit a form and return the data
Unless there is a way of simulating this on jsfiddle?

trevor1940

ASKER

I've fixed part of the problem by moving the button creation bloc (see Bellow), unsure if this is correct place?

however I still get an error when a button is pushed
" DataTable.draw is not a function"

Could someone suggest why?

var CodeArray=[];
$(function(){

    // Bind the <a> click event
    $('#MyForm').submit(function() {
        e.preventDefault();

    // Set up the DataTable
    $('#dTable').DataTable({
        // Specify your column data
        "columns": [{ "data": "name" }, { "data": "Lat" }, { "data": "Long" },{"data" : "code"}, { "data": "url" }],
        // Set up the AJAX Datasource
        "ajax": {
            "url": "data.json",
            "dataSrc" : function (json) {
                // Manipulate the returned data before rendering it
                $.each(json, function(i, item) {
                    item.id = item.id * 2;
                    item.name = item.name.toUpperCase();
                    item.url = "<a href='" + item.url + "'>" + "Click Me" + "</a>";
                CodeArray.indexOf(item.code) === -1? CodeArray.push(item.code) : consolle.log(item.code + " Exists"); 
                });

// Moved to here works
  $.each(CodeArray, function(index, code){
   var btn = $("<input />",{
          type  : "button",
                  value : code,
                  id  : "btn_"  + code,
                  on  : {
                click : function(){
                      alert("Hello Code" + code);
               
                        $.fn.dataTable.ext.search.push(
      			function(settings, data, dataIndex) {
                       return $(table.row(dataIndex).node()).hasClass(code);
                     } );
                  DataTable.Draw();
 // this    but get error DataTable.draw is not a function
                // $("#DataTable").Draw();
          }
      }
   });
   
  $("#FilterButs").appendTo(btn);
  });
                return json;
            },
            error: function(xhr, status, error) {
                // Add some AJAX Error handling
                console.log("We have an error!");
                console.log(status);
                console.log(error);
            }
        },
        "createdRow": function ( row, data, index ) {
            // Add an class to each <tr>
            $(row).addClass(data.code);
        },
        scrollY : '200px', 
        scrollCollapse: true,
        paging: false,
        searching: false,
        info: false,
        bDestroy : true
    });

    });// End form submit
 });

Open in new window

zephyr_hex (Megan)

I think you have a couple of problems going on, but the most obvious one to me is that you're calling draw() on a variable called DataTable that has not been defined. Moreover, you're calling it as Draw() when it should be draw().

I recommend you do the following on Line 9:

var table = $('#dTable').DataTable({

Open in new window

And then on Line 38:

table.draw();

Open in new window

I don't think that's going to fix your entire problem. You could set up a JS Fiddle by simplifying your code. Remove the AJAX call and use a static data set, which will also remove the necessity for a form submit. Get your datatable working, then add the AJAX and form submit back in.

trevor1940

ASKER

Hi

I've made a JS fiddle

I've simulated the query form by creating some static JSON and hosting in a myjson bin

I can Hide the rows using jquery toggle but i know that isn't the proper way to do it and relies on the paging set to false

Your last suggestion didn't work because I'm creating the fillter buttons inside the DataTable load again I'm shore this is the wrong way

trevor1940

ASKER

Not solved resubmitted question