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

LVL 1
trevor1940Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zephyr_hex (Megan)DeveloperCommented:
Are you able to set up a demo that shows the problem on a site like JS Fiddle ?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
trevor1940Author Commented:
Not easily
Due to needing to submit a form and return the data
Unless there is a way of simulating this on jsfiddle?
0
trevor1940Author Commented:
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

0
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

zephyr_hex (Megan)DeveloperCommented:
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.
0
trevor1940Author Commented:
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
0
trevor1940Author Commented:
Not solved resubmitted question
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.