我有一个正常工作的数据表,现在我想添加一个过滤器,我添加了一个带有提交按钮的输入。基本上数据表有一个已经过滤的,当用户写一些ajax调用去服务器时,(On debugging)数据表过滤器值显示等于sSearch,现在我想要这个,当前(添加字段)ajax调用也当用户但其值不显示等于sSearch时。任何人都可以告诉我如何解决这个问题?先谢谢
$(function(){
/////////////////////////////////////////////////////////////////////
// dataTables default values / settings starts {
/////////////////////////////////////////////////////////////////////
// bootstrap
$.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(
'<ul>'+
'<li class="prev disabled"><a href="#">← '+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+' → </a></li>'+
'</ul>'
);
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<iLen ; i++ ) {
// remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// add the new list items and their event handlers
for ( j=iStart ; j<=iEnd ; j++ ) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
$('<li '+sClass+'><a href="#">'+j+'</a></li>')
.insertBefore( $('li:last', an[i])[0] )
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
fnDraw( oSettings );
} );
}
// add / remove disabled classes from the static elements
if ( oPaging.iPage === 0 ) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
}); // bootstrap ends
// additional functions for data table
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
/*console.log( "iStart: " + oSettings._iDisplayStart );
console.log( "iEnd: " + oSettings.fnDisplayEnd );
console.log( "iLength: " + oSettings._iDisplayLength );
console.log( "iTotal: " + oSettings.fnRecordsTotal() );
console.log( "iFilteredTotal: " + oSettings.fnRecordsDisplay() );
console.log( "iPage: " + Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ) );
console.log( "iTotalPages: " + Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) );*/
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 )
};
} // ends
// error throwing method
$.fn.dataTableExt.sErrMode = 'throw';
// dataTable default settings
var oDefault_dataTables = {
// sDom {
"sDom": "<'row-fluid'" + //---------------- 1: row-fluid starts
"<'span12'" + //----------------2: span12 starts
//"<'span1'C>" +
"<'span2'l>" +
"<'span10'f>" +
//"<'span6'T>" +
">" + // 2: span12 ends
">" + // 1: row-fluid ends
"<'center'r>" +
"<'row-fluid'" + //---------------- 1: row-fluid starts
"<'row-fluid't>" +//---------------- 3: tbl row-fluid starts & ends
">" + // 1: row-fluid ends
"<'row-fluid'" + //---------------- 1: row-fluid starts
"<'span12'>" + //---------------- 4: span12 starts
"<'span12 center'lp>" +
"<'span12 center'>" +
">", // 1: row-fluid ends
//////////////////////////////////////////////
/*********************************************
l - Length changing // record limit dropdown
f - Filtering input // Search Box
t - The table!
i - Information
p - Pagination
r - pRocessing
< and > - div elements
<"class" and > - div with a class
Examples: <"wrapper"flipt>, <lf<t>ip>
*********************************************/
////////////////////////////////////////////// }
//------------------------------------------------------------------------
// basic setup {
//------------------------------------------------------------------------
"bJQueryUI": true,
"bAutoWidth": true, // Enable or disable automatic column width calculation
"bDeferRender": true,
"oLanguage": {
"sLengthMenu": "_MENU_",
"sZeroRecords": "No records to display",
"sProcessing": "<img src='" + THEMEURL + "img/ajax_loaders/ajax-loader-5.gif'>",
"sSearch": "",
},
// }
//------------------------------------------------------------------------
// pagination setup {
//------------------------------------------------------------------------
"bPaginate": true,
"sPaginationType": "bootstrap", // [bootstrap, full_numbers, simple, simple_numbers, full]
"iDisplayStart": 0, // where to start from db
"iDisplayLength": DATATABLE_LIMIT, // db Limit
"aLengthMenu": DATATABLE_aLengthMenu, //[[5, 15, 25, 50, 100], [5, 15, 25, 50, 100]], // record get limit dropdown
// }
//------------------------------------------------------------------------
// server side setup
//------------------------------------------------------------------------
"bServerSide": true,
"bProcessing": true,
"sServerMethod": "POST",
"sAjaxSource": DATATABLE_cnt + '?uri_str=' + URI_STR,
/*"fnServerParams": function ( aoData ) {
//console.log(aoData);
//aoData.push( { "name": "more_data", "value": "my_value" } );
},*/
"fnDrawCallback": function( oSettings ) {
// initialize js functions
docReady();
},
"aoColumns": DATATABLE_aoColumns,
//------------------------------------------------------------------------
//------------------------------------------------------------------------
//------------------------------------------------------------------------
//------------------------------------------------------------------------
} // oDefault_dataTables ends
// initializing
var oST = $.extend(true, {}, oDefault_dataTables);
// datatable
var oTable = $('.datatable').dataTable(oST);
/////////////////////////////////////////////////////////////////////
// dataTables default values / settings ends }
/////////////////////////////////////////////////////////////////////
});
oTable.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var listingcity = document.getElementById('cityorzip').value;
// push({"name":"cityorzip", "value":$('input.cityorzip').val() });
//alert("test"+listingcity);
}
);
///aoData.push({"name":"cityorzip", "value":$('input.cityorzip').val() });
$('#cityorzip').keyup(
function() { oTable.fnDraw();
//push("{'name':'cityorzip'",+ "'value':$('input.cityorzip').val() }")
}
);