Searching not working properly
Searching not working properly
I would like to use default search feature but for some reason is not working properly.
Let say that this is my first row of the table:
| Mario | Houston | USA |
Any of those searches should result this row:
"M", "m", "M ", "m ", "ma", "Ma", "m ho", "ma ho", "Ma Ho", "Mario", "Mario "
But at the moment I get this:
"M" - shows
"m" - shows
"M " - no results
"m " - no results
"ma" - no results
"Ma" - shows
"M ho" - no results
"ma ho" - no results
"Ma Ho" - no results
"Mario" - shows
"Mario " - no results
So it's looks like my search has been limited to one cell only and has to be written in same way (first letter capital in this case).
I'm using my dataTables integrated with Twitter Bootstrap.
Here is what javasripts I'm using on the website:
[code]
[/code]
here is dataTables javascript:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sAjaxSource": "scripts/get_table.php",
"bProcessing": true,
"bServerSide": true,
"bStateSave": true,
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {"sLengthMenu": "_MENU_ records per page"},
"bFilter": true,
"aoColumns": [
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": false, "bSortable": false, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": false, "bSortable": false, "bVisible": true },
]
});
});
[/code]
I have also java script for pagination in Bootstrap:
[code]
/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
}
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};
$(nPaging).addClass('pagination').append(
''+
'← '+oLang.sPrevious+''+
''+oLang.sNext+' → '+
''
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
},
"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for ( i=0, iLen=an.length ; i
Let say that this is my first row of the table:
| Mario | Houston | USA |
Any of those searches should result this row:
"M", "m", "M ", "m ", "ma", "Ma", "m ho", "ma ho", "Ma Ho", "Mario", "Mario "
But at the moment I get this:
"M" - shows
"m" - shows
"M " - no results
"m " - no results
"ma" - no results
"Ma" - shows
"M ho" - no results
"ma ho" - no results
"Ma Ho" - no results
"Mario" - shows
"Mario " - no results
So it's looks like my search has been limited to one cell only and has to be written in same way (first letter capital in this case).
I'm using my dataTables integrated with Twitter Bootstrap.
Here is what javasripts I'm using on the website:
[code]
[/code]
here is dataTables javascript:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sAjaxSource": "scripts/get_table.php",
"bProcessing": true,
"bServerSide": true,
"bStateSave": true,
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {"sLengthMenu": "_MENU_ records per page"},
"bFilter": true,
"aoColumns": [
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": false, "bSortable": false, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "numeric", "bSearchable": true, "bSortable": true, "bVisible": true },
{ "sType": "string", "bSearchable": false, "bSortable": false, "bVisible": true },
]
});
});
[/code]
I have also java script for pagination in Bootstrap:
[code]
/* Default class modification */
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
}
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};
$(nPaging).addClass('pagination').append(
''+
'← '+oLang.sPrevious+''+
''+oLang.sNext+' → '+
''
);
var els = $('a', nPaging);
$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
},
"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for ( i=0, iLen=an.length ; i
This discussion has been closed.
Replies
Or maybe server-side processing datattables have some limitation in search?
Allan provided excellent example. Is working well except that doesn't include words with first capital letter.
So if column contain word "Mario" if you type in search "mario" you will get no result..
Any solution for that?