Skip to content

Instantly share code, notes, and snippets.

@angelsystem

angelsystem/ajax.html

Last active August 29, 2015 13:59
Show Gist options
  • Save angelsystem/10561924 to your computer and use it in GitHub Desktop.
Save angelsystem/10561924 to your computer and use it in GitHub Desktop.
Download ZIP
datatable filter no work
Raw
ajax.html
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/dusuhoju/3/edit
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yet Another DataTables Column Filter (Yadcf) Showcase</title>
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"></link>
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery-ui.1.9.0.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/chosen.min.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/main.css" rel="stylesheet" type="text/css" />
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery-1.8.2.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery-ui.1.9.0.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/chosen.jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery.dataTables.min.js"></script>
<script src="http://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/fnReloadAjax.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/shCore.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/shBrushJScript.js"></script>
<style id="jsbin-css">
.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>
</head>
<body id="yadcf_example">
<div id="container">
<h1>Yet Another DataTabledddds 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>Numbers</th>
<th>Country</th>
<th>Values</th>
<!-- <th>Tags</th> -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
/*global $, SyntaxHighlighter*/
var oTable;
$(document).ready(function () {
'use strict';
oTable = $('#example').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"iDisplayLength": 10,
"bStateSave": true,
"sAjaxSource": "deep.txt",
"aoColumns": [{
"mData": "some"
}, {
"mData": "number"
}, {
"mData": "country"
}, {
"mData": "values"
}]
}).yadcf([
{column_number : 0, select_type: 'chosen', filter_match_mode: 'exact'},
{column_number : 1, filter_type: "range_number_slider"},
{column_number : 2, select_type: 'chosen', select_type_options: {no_results_text:'Can\'t find ->',search_contains: true}},
{column_number : 3, filter_type: "auto_complete", text_data_delimiter: ","}
]);
SyntaxHighlighter.all();
});
</script>
</body>
</html>
Raw
deep.txt
{ "aaData": [
{
"some": "Some Data 11",
"number": 1000,
"country": "United States",
"values": "a_value,b_value"
},
{
"some": "Some Data 2",
"number": 22,
"country": "United Kingdom",
"values": "b_value,c_value"
},
{
"some": "Some Data 3",
"number": 33,
"country": "Russia",
"values": "a_value"
},
{
"some": "Some Data 4",
"number": 44,
"country": "Aland Islands",
"values": "b_value"
},
{
"some": "Some Data 5",
"number": 55,
"country": "Chile",
"values": "a_value,b_value"
},
{
"some": "Some Data 1",
"number": 111,
"country": "China",
"values": "c_value,d_value"
},
{
"some": "Some Data 2",
"number": 222,
"country": "Russia",
"values": "e_value,f_value"
},
{
"some": "Some Data 3",
"number": 33,
"country": "Ukraine",
"values": "a_value,bb_value"
},
{
"some": "Some Data 4",
"number": 444,
"country": "Senegal",
"values": "a_value,f_value"
},
{
"some": "Some Data 5",
"number": 55,
"country": "Russia",
"values": "a_value,c_value"
},
{
"some": "Some Data 1",
"number": 300,
"country": "Russia",
"values": "a_value,b_value"
},
{
"some": "Some Data 2",
"number": 242,
"country": "Ukraine",
"values": "d_value,aa_value"
},
{
"some": "Some Data 3",
"number": 703,
"country": "United Kingdom",
"values": "a_value,c_value"
},
{
"some": "Some Data 4",
"number": 604,
"country": "United Kingdom",
"values": "a_value,bb_value"
},
{
"some": "Some Data 5",
"number": 550,
"country": "United States",
"values": "c_value,e_value"
},
{
"some": "Some Data 1",
"number": 901,
"country": "United States",
"values": "a_value,e_value"
}
] }
Raw
index.html
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/dusuhoju/3/edit
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Yet Another DataTables Column Filter (Yadcf) Showcase</title>
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery.dataTables.css" rel="stylesheet" type="text/css">
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css"></link>
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery-ui.1.9.0.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/chosen.min.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/css/main.css" rel="stylesheet" type="text/css" />
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery-1.8.2.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery-ui.1.9.0.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/chosen.jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery.dataTables.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/jquery.dataTables.yadcf.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/shCore.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/shBrushJScript.js"></script>
<!-- // <script src="https://dl.dropboxusercontent.com/u/55621125/yadcf/war/resources/js/dom_source_chosen_example.js"></script> -->
<style id="jsbin-css">
.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>
</head>
<body id="yadcf_example">
<div id="container">
<h1>Yet Another DataTabledddds 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>Numbers</th>
<th>Country</th>
<th>Values</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Some Data 11</td>
<td>1000</td>
<td>United States</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>United Kingdom</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>Russia</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>Aland Islands</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>Chile</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>China</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>222</td>
<td>Russia</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>Ukraine</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>444</td>
<td>Senegal</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>Russia</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>300</td>
<td>Russia</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>242</td>
<td>Ukraine</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>703</td>
<td>United Kingdom</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>604</td>
<td>United Kingdom</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>550</td>
<td>United States</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>901</td>
<td>United States</td>
<td>a_value,e_value</td>
<td><span class="label lightblue">Tag1</span></td>
</tr>
</tbody>
</table>
</div>
<script>
/*global $, SyntaxHighlighter*/
var oTable;
$(document).ready(function () {
'use strict';
oTable = $('#example').dataTable({
"bJQueryUI": true,
"bStateSave": true
}).yadcf([
{column_number : 0, select_type: 'chosen', filter_match_mode: 'exact'},
{column_number : 1, filter_type: "range_number_slider"},
{column_number : 2, select_type: 'chosen', select_type_options: {no_results_text:'Can\'t find ->',search_contains: true}},
{column_number : 3, filter_type: "auto_complete", text_data_delimiter: ","},
{column_number : 4, select_type: 'chosen', select_type_options : {disable_search:true}, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
SyntaxHighlighter.all();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment