Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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="http://static.tumblr.com/1szuamz/29jmo3fde/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="http://static.tumblr.com/1szuamz/WjUmo51md/jquery.datatables.yadcf.js"></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 "More Data" 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>More Data</th>
            <th>Yes / No</th>
            <th>Values</th>
            <th>Tags</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd gradeX">
            <td>Some Data 1</td>
            <td>More Data 11</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>More Data 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>More Data 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>More Data 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>More Data 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>More Data 11</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>More Data 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>More Data 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>More Data 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>More Data 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>More Data 11</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>More Data 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>More Data 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>More Data 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>More Data 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>More Data 11</td>
            <td>No</td>
            <td>a_value,e_value</td>
            <td><span class="label lightblue">Tag1</span></td>
          </tr>
        </tbody>
      </table>
​
    </div>
  </body>
</html>
​
 
.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;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
vedmackpro
0viewers