jquery - Initiating Datatable Filter when using Javascript to add Text to Input Field -
i using datatables http://www.datatables.net/ table in project.
i want use datatables filter filter out items table based on pre-defined keywords contained within table.
the user can type in filter great, want give them "shortcut" buttons text.
i have working demo here http://jsfiddle.net/vjq5l/4/
you can see when going through buttons - firefox - netscape - osx etc have js working updates value of filter input field.
only problem not filter, need press space on keyboard when focus on input field work.
i sure there might quick solution adding filter call after each button pressed or blur event or something. not sure how it..
my js code
$(function() { /* table initialisation */ $('#example').datatable({ "sdom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>", "olanguage": { "slengthmenu": "_menu_ records per page" } }); /* adding filter filter input field */ /* code may not prettiest best can come */ $('a.cmsfilter').click(function(){ if($(this).text() =="all"){ $('#example_filter input').val('all') } else if($(this).text() =="firefox"){ $('#example_filter input').val('firefox') } else if($(this).text() =="netscape"){ $('#example_filter input').val('netscape') } else if($(this).text() =="osx"){ $('#example_filter input').val('osx') } else if($(this).text() =="win"){ $('#example_filter input').val('win') } }); });
i able answer 1 myself, tip 1 of admins @ datatables...
updated fiddle here
updated js pasting below.
$(function () { /* table initialisation */ var otable = $('#example').datatable({ "sdom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>", "olanguage": { "slengthmenu": "_menu_ records per page" } }); /* adding filter filter input field */ $('a.cmsfilter').click(function () { if ($(this).text() == "all") { otable.fnfilter(''); } else if ($(this).text() == "firefox") { otable.fnfilter('firefox'); } else if ($(this).text() == "netscape") { otable.fnfilter('netscape'); } else if ($(this).text() == "osx") { otable.fnfilter('osx'); } else if ($(this).text() == "win") { otable.fnfilter('win'); } }); });
Comments
Post a Comment