How to create individual column filters using data tables & aocolumn?

naveen3562003

Hi Friends,

I am using below code for my project work & I am newbie to work on jquery, even though data tables is pretty much self explanatory plugin I am suck in some places in those below is the once place which happens to be more unsuccessful place. please help me.

My problem is i want to use "aocolumn" function for individual column filtering but dont know how it works.

below is the code:

http://jquery-datatables-column-filter.googlecode.com/svn/trunk/index.html

<

script type="text/javascript">
/* Formatting function for row details - modify as you need */
function format ( d ) {
// d is the original data object for the row
return '

<

table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.Name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.Extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'<tr>'+
'<td>Edit</td>'+
'<td><button><a href="edit.php?id='+d.Name+'>Click</a></button></td>'+
'</tr>'+
'</table>';
}

$(document).ready(function() {
var table = $('#example').DataTable( {
"sAjaxSource": "/la/json/data.php",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"sPaginationType" : "full_numbers",
"bFilter": true,
"paging": true,
"bProcessing": true,
"iDisplayLength":15,
"iDisplayStart":0,
"columns": [
{ "class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
},
{
"orderable": true,
"targets" : -1,
"data": null,
"defaultContent": '<button>click</button>',
},
{ "data": "Name",
},
{ "data": "Position" },
{ "data": "Office" },
{ "data": "Extn" },

                ],
    "order": [[3, 'desc']],
    "tableTools": {
                   "sSwfPath": "/la/swf/copy_csv_xls_pdf.swf"
                  },
    "bFilter": true,
    "sDom": '<"top"lf>rt<"clear"><"bottom"ipT><"clear">',
    "bPaginate": true,
    "bLengthChange": true,
    "bAutoWidth": true,
    "iCookieDuration": 60*60*24, // 1 day 

    }); 



// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

 // Function to perform button function
$('#example tbody').on( 'click', 'button', function () {
    var data = $('td', this).eq(0).text();
    alert( 'You clicked on '+data+'\'s row' );
} );

} );
</script>

and I want output as : http://jquery-datatables-column-filter.googlecode.com/svn/trunk/ajaxSource.html

Thanks & Regards,
Naveen

Rpiechura

In order to use that plugin you need to download it, include it and use it. I'll assume you've got the first two and you just didn't see how to use it. After the code

"iCookieDuration": 60*60*24, // 1 day
    });

Before you put the ; you want to say .columnFilter(), so it'll look like

"iCookieDuration": 60*60*24, // 1 day 
    }).columnFilter();

Rpiechura

As far as aoColumns go, it's the old syntax for 'columns', they are the exact same thing written in different ways. I'm not sure if the plugin will work with 1.10 or not (I don't use it) but you don't have to worry about knowing anything more about that. Don't use a combination of 1.10 syntax and 1.9.4 syntax (what 'aoColumns' is), because it almost never works when you mix them.

naveen3562003

I have tried it from the source but no luck ....I have used as below:

"iCookieDuration": 606024, // 1 day })..columnFilter({
Columns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] },
{ type: "text" },
null,
{ type: "number" },
{ type: "select", values: [ 'A', 'C', 'U', 'X'] }
]
})

still no luck i am getting function undefined error....any help would be very helpful

naveen3562003

Yes you were right but now because I am using 1.10 v plugin it is not much of help in this case ....ofcourse I have used a function and achieved a kind of filtering as below but it only helps me a part....like it only gives me text based filter.but, i am looking for text and drop down based column filtering.

below is the code I used with out any plugin:

// Setup - add a text input to each footer cell
$('#example thead th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
if($(this).index() !=0 && $(this).index() !=1)
$(this).html( '<input type="text" placeholder="Search '+title+'" style="width:100px"/></br>'+title+'' );
} );

// Apply the filter
$("#example thead input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
} );

naveen3562003

".columnFilter" is not a function so it doesn't work with updated version of data tables i.e., 1.10.0....so, guys i am updating hear because if anyone looking for similar kind of solution I don't want you to wast their time.

Dear Datatables crew,

This is the best plugin for data customization through transformation in to structured table and now I want you to take above requirement as a enhancement to the current plugin.

Rpiechura

The Column Filter plugin that you were trying to use is a 3rd party plugin, which means that unless they decide to update it, it will continue to not work.

That being said, there are examples of using individual column filtering for both text and drop down. I imagine that you could play around with it to make it so that you can do both instead of having to choose one. The examples can be found at http://datatables.net/examples/api/multi_filter_select.html and http://datatables.net/examples/api/multi_filter.html. There are also other options for column filter plugins that you can use. One that I know of (but haven't used) is http://yadcf-showcase.appspot.com/

I hope that one of those leads you to something that works for you.

naveen3562003

for this, http://datatables.net/examples/api/multi_filter_select.html and http://datatables.net/examples/api/multi_filter.html.

Yes I have already tried above examples but problem in the above examples it either encourages completely select or dropdown but not combo box...I am looking for that solution.

In regards to, http://yadcf-showcase.appspot.com/ I have already tried but it even have lot a problems :(.