• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 61
  • Last Modified:

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

0
trevor1940
Asked:
trevor1940
  • 4
  • 2
1 Solution
 
zephyr_hex (Megan)DeveloperCommented:
Are you able to set up a demo that shows the problem on a site like JS Fiddle ?
0
 
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now