Reputation: 117
I am using server side dataTable , I want to know how can I enable search on every column(some column contains select box).
I was referring http://legacy.datatables.net/ref link, here I saw aoSearchCols
can be used for searching, but it is not working
my current script is
$(document).ready(function() {
$('#LogTable').dataTable({
"bFilter": true,
"bSort": true,
"bProcessing" : false,
bServerSide : true,
sAjaxSource : "./Log!List.action",
sServerMethod : "POST",
"columns": [
{ "data": "LogId" },
{ "data": "tableName" },
{ "data": "columnName" },
{ "data": "oldValue" },
{ "data": "newValue" },
{ "data": "changeTypeText" },
{ "data": "changedByName" },
{ "data": "changedOn" },
],
"aoSearchCols": [
{ "data": "LogId" },
{ "data": "tableName" },
{ "data": "columnName" },
{ "data": "oldValue" },
{ "data": "newValue" },
{ "data": "changeTypeText" },
{ "data": "changedByName" },
{ "data": "changedOn" },
]
});
});
do anyone know how this can be done
Things i am using:
JQuery datatable and
Java Struts 2
---EDIT---
i tried to put manually then its not taking it with the params
initComplete : function() {
var r = $('#LogTableSearch tr');
var i=0;
r.find('td').each(function() {
$(this).attr('id','sSearch_'+i++);
});
$('#LogTable tfoot').append(r);
$('#sSearch_0').css('text-align', 'center');
},
it showed the search box in the fotter of the table but on ajax request its not taking it with request
Upvotes: 0
Views: 938
Reputation: 117
after lots of researched i finally got a way that works, i don't know its the right way or not but this works for me This is my script:
<script>
$(document).ready(function() {
var table = $('#LogTable').DataTable({
"bSort" : true,
"bProcessing" : false,
"bInfo" : true,
bServerSide : true,
sAjaxSource : "./Log!List.action",
sServerMethod : "POST",
"aoColumns" : [
{"data" : "LogId"},
{"data" : "tableName"},
{"data" : "columnName"},
{"data" : "oldValue"},
{"data" : "newValue"},
{"data" : "changeTypeText"},
{"data" : "changedByName"},
{"data" : "changedOn"}, ],
});
// Apply the search
table.columns().every( function () {
var that = this;
$('input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
} );
$( 'select', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
} );
} );
});
</script>
i created my search fields manually in the tfoot tag of the table
now search parameter goes to server side where i got them from the request and my work is done. :)
Upvotes: 0
Reputation: 414
according to the document
$(document).ready( function() {
$('#example').dataTable( {
"aoSearchCols": [
null,
{ "sSearch": "My filter" },
null,
{ "sSearch": "^[0-9]", "bEscapeRegex": false }
,null,
null,
null,
null
]
} );
} )
should be
in this case I t should be filter according to tableName
Upvotes: 0