JQuery DataTable

Set the filterable property of the jqxDataTable. Author: http://jqwidgets.com

by Hristo Hristov

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxWidget'></div>
<div style="margin-top: 10px;">
    <button id="check">Check</button>
</div>

JavaScript

var listBoxSelector = 'jqxWidget';
var source = [
   "Affogato",
   "Americano",
   "Bicerin",
   "Breve",
   "Café Bombón",
   "Café au lait",
   "Caffé Corretto",
   "Café Crema",
   "Caffé Latte",
   "Caffé macchiato",
   "Café mélange",
   "Coffee milk",
   "Cafe mocha",
   "Cappuccino",
   "Carajillo",
   "Cortado",
   "Cuban espresso",
   "Espresso",
   "Eiskaffee",
   "The Flat White",
   "Frappuccino",
   "Galao",
   "Greek frappé coffee",
   "Iced Coffee",
   "Indian filter coffee",
   "Instant coffee",
   "Irish coffee",
   "Liqueur coffee"
];
var loop = 1;
// Create a jqxListBox
$("#" + listBoxSelector).jqxListBox({ 
    selectedIndex: -1, 
    source: source, 
    width: 200, 
    height: 250,
    renderer: function (index, label, value) {
        //var datarecord = data[index];
        var imgurl = '../../images/' + label.toLowerCase() + '.png';
        var img = '<img height="50" src="' + imgurl + '"/>';
        var table = '<table><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + 'F' + loop + " " + 'L' + loop + '</td></tr><tr><td>' + loop + '</td></tr></table>';
        //var table = '<table><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.title + '</td></tr></table>';
        loop++;
        return table;
    }
});

$("#check").jqxButton();
$("#check").click(function () {
    // listitem0jqxWidget
    var firstItemViewSelector = 'listitem0' + listBoxSelector;
    var firstItemContent = $('#' + firstItemViewSelector).text();
    alert(firstItemContent);
});