Search code examples
javascriptyadcf

attach onclick event to my tags - javascript. yadcf

Here is project demo: Github
Example of live demo: Live demo

I wish to be able to click on the Tag that is inside the table row itself and not on the drop down in the header

My demo have this code:

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="jquery.dataTables.yadcf.js"></script>

<script>
$(".label.lightblue" ).on( "click", function() {
  yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);
  onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag2']]);"
});
</script>

<style>
.label {
  padding: 0px 10px 0px 10px;
        border: 1px solid #ccc;
        -moz-border-radius: 1em; /* for mozilla-based browsers */
        -webkit-border-radius: 1em; /* for webkit-based browsers */
        border-radius: 1em; /* theoretically for *all* browsers*/
}

.label.lightblue {
        background-color: #99CCFF;
}

#external_filter_container_wrapper {
  margin-bottom: 20px;
}

#external_filter_container {
  display: inline-block;
}
</style>


<script>
$(document).ready(function(){
  $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});



</script>
<meta charset=utf-8 />
<title>yadcf - Yet Another DataTables Column Filter</title>
</head>
 <body id="yadcf_example">
    <div id="container">

      <h1>Yet Another DataTables Column Filter - (yadcf) example</h1>
      <div id="external_filter_container_wrapper">
        <label>External filter for "Numbers" column :</label>
        <div id="external_filter_container"></div>
      </div>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                <thead>
                  <tr>
                    <th>Some Data</th>
                    <th>Numbers</th>
                    <th>Yes / No</th>
                    <th>Values</th>
                    <th>Tags</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="odd gradeX">
                    <td>Some Data 1</td>
                    <td>1000</td>
                    <td>Yes</td>
                    <td>a_value,b_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="even gradeC">
                    <td>Some Data 2</td>
                    <td>22</td>
                    <td>No</td>
                    <td>b_value,c_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
                  </tr>
                  <tr class="odd gradeA">
                    <td>Some Data 3</td>
                    <td>33</td>
                    <td>Yes</td>
                    <td>a_value</td>
                    <td><span class="label lightblue">Tag2</span><span class="label lightblue">Tag3</span></td>


                  </tr>
                  <tr class="even gradeA">
                    <td>Some Data 4</td>
                    <td>44</td>
                    <td>No</td>
                    <td>b_value</td>
                    <td><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="odd gradeA">
                    <td>Some Data 5</td>
                    <td>55</td>
                    <td>Yes</td>
                    <td>a_value,b_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="even gradeA">
                    <td>Some Data 1</td>
                    <td>111</td>
                    <td>No</td>
                    <td>c_value,d_value</td>
                    <td><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 2</td>
                    <td>22</td>
                    <td>Yes</td>
                    <td>e_value,f_value</td>
                    <td><span class="label lightblue">Tag3</span><span class="label lightblue">Tag4</span><span class="label lightblue">Tag5</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 3</td>
                    <td>33</td>
                    <td>No</td>
                    <td>a_value,bb_value</td>
                    <td><span class="label lightblue">Tag5</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 4</td>
                    <td>44</td>
                    <td>Yes</td>
                    <td>a_value,f_value</td>
                    <td><span class="label lightblue">Tag4</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 5</td>
                    <td>55</td>
                    <td>No</td>
                    <td>a_value,c_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 1</td>
                    <td>10</td>
                    <td>Yes</td>
                    <td>a_value,b_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 2</td>
                    <td>22</td>
                    <td>No</td>
                    <td>d_value,aa_value</td>
                    <td><span class="label lightblue">Tag1</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 3</td>
                    <td>33</td>
                    <td>Yes</td>
                    <td>a_value,c_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 4</td>
                    <td>44</td>
                    <td>No</td>
                    <td>a_value,bb_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 5</td>
                    <td>55</td>
                    <td>Yes</td>
                    <td>c_value,e_value</td>
                    <td><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 1</td>
                    <td>101</td>
                    <td>No</td>
                    <td>a_value,e_value</td>
                    <td><span class="label lightblue">Tag1</span></td>
                  </tr>
                </tbody>
              </table>



    </div>
  </body>
</html>

I can't understand how attach online click in my demo code

1) How call this code upon page ready (note that your selector probably will be different) ?

$(".label.lightblue" ).on( "click", function() {
  yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);
});

2) How attach onclick event to your "tags" , something like this onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag1']]);" ?

Can you paste edited code of my demo so I can understand?

Solution

  • For example

    You can change

    $(document).ready(function(){
  $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});

    into

    $(document).ready(function(){
  $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);

    $('#example').on('click',".label.lightblue", function () {
      yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);
    });
});

    OR

    add onclick to all your tags spans so instead of <td><span class="label lightblue">Tag2</span></td>

    it will look like <td><span onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag2']]);" class="label lightblue">Tag2</span></td>

    Your jsfiddle with proper yadcf inclusion

    Using $(".label.lightblue" ).on

    onclick="yadcf.exFilterColumn (notice that you need to add onclick with the right Tag as parameter...)

    Note that you should use https://rawgit.com/ to include js/css from github on site like jsfiddle / jsbin / etc...