我使用jsp和ajax从我的数据库中获取数据并将其发布到表中。目前我能够使用任何字段获取数据，问题是当我想使用2个或更多字段时，当我点击另一个字段时我得到空值
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Cliente',
toolbarsearch: true,
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'nombre_cliente ASC',
actions: {
listAction: 'CRUDController?action=list',
createAction:'CRUDController?action=create',
updateAction: 'CRUDController?action=update',
deleteAction: 'CRUDController?action=delete'
},
fields: {
nombre_cliente: {
title: 'Nombre',
key: true,
list: true,
create:true
},
rut: {
title: 'R.U.T',
width: '30%',
edit:true
},
direccion: {
title: 'Direccion',
width: '20%',
edit: true
},
comuna: {
title: 'Comuna',
width: '20%',
edit: true
},
ciudad: {
title: 'Ciudad',
width: '20%',
edit: true
},
region: {
title: 'Region',
width: '20%',
edit: true
},
correo: {
title: 'Email',
width: '20%',
edit: true
},
telefono: {
title: 'Telefono',
width: '20%',
edit: true
}
}
});
$('#PersonTableContainer').keyup(function(e){
$('#PersonTableContainer').jtable('load', {
searchNombre: $('#jtable-toolbarsearch-nombre_cliente').val(),
searchRut: $('#jtable-toolbarsearch-rut').val(),
searchDireccion: $('#jtable-toolbarsearch-direccion').val(),
searchComuna: $('#jtable-toolbarsearch-comuna').val(),
searchCiudad: $('#jtable-toolbarsearch-ciudad').val(),
searchRegion: $('#jtable-toolbarsearch-region').val(),
searchCorreo: $('#jtable-toolbarsearch-correo').val(),
searchTelefono: $('#jtable-toolbarsearch-telefono').val(),
});
});
$('#PersonTableContainer').keyup();
});
这是我的控制器
if(request.getParameter("action")!=null){
List<BeanCliente> lstUser=new ArrayList<BeanCliente>();
String action=(String)request.getParameter("action");
Gson gson = new Gson();
response.setContentType("application/json");
if(action.equals("list")){
try
{
//Fetch Data from User Table
int startPageIndex=Integer.parseInt(request.getParameter("jtStartIndex"));
int numRecordsPerPage=Integer.parseInt(request.getParameter("jtPageSize"));
String sorting = request.getParameter("jtSorting");
String searchNombre = request.getParameter("searchNombre");
String searchRut = request.getParameter("searchRut");
String searchDireccion = request.getParameter("searchDireccion");
String searchComuna = request.getParameter("searchComuna");
String searchCiudad = request.getParameter("searchCiudad");
String searchRegion = request.getParameter("searchRegion");
String searchCorreo = request.getParameter("searchCorreo");
String searchTelefono = request.getParameter("searchTelefono");
System.out.println(sorting+searchNombre+searchRut+searchDireccion+searchComuna+searchCiudad+searchRegion+searchCorreo+searchTelefono);
lstUser=dao.getAllUsers(searchNombre,searchRut,searchDireccion,searchComuna,searchCiudad,searchRegion,searchCorreo,searchTelefono,startPageIndex,numRecordsPerPage,sorting );
int userCount=dao.getUserCount();
JsonElement element = gson.toJsonTree(lstUser, new TypeToken<List<BeanCliente>>() {}.getType());
JsonArray jsonArray = element.getAsJsonArray();
String listData=jsonArray.toString();
listData=" {\"Result\":\"OK\",\"Records\":"+listData+",\"TotalRecordCount\":"+userCount+"}";
response.getWriter().print(listData);
}
catch(Exception ex)
{
String error="{\"Result\":\"ERROR\",\"Message\":"+ex.getMessage()+"}";
response.getWriter().print(error);
ex.printStackTrace();
}
}
即时使用此jquery添加输入字段
/** JTABLE Multiple toolbar search extension
**/
(function ($) {
var base={
_addRowToTableHead:$.hik.jtable.prototype._addRowToTableHead
}
$.extend(true, $.hik.jtable.prototype, {
options: {
toolbarsearch:false
},
/** Overrides Method
/* Adds tr element to given thead element
*************************************************************************/
_addRowToTableHead: function ($thead) {
var $tr = $('<tr></tr>')
.appendTo($thead);
this._addColumnsToHeaderRow($tr);
if(this.options.toolbarsearch){
var $tr = $('<tr></tr>')
.appendTo($thead);
this._toolbarsearch_addColumnsToHeaderRow($tr);
}
},
/* Adds column header cells to given tr element.
*************************************************************************/
_toolbarsearch_addColumnsToHeaderRow: function ($tr) {
var self = this;
for (var i = 0; i < this._columnList.length; i++) {
var fieldName = this._columnList[i];
var $headerCell = this._toolbarsearch_createHeaderCellForField(fieldName, this.options.fields[fieldName]);
$headerCell.appendTo($tr);
}
$reset = $('<th></th>')
.addClass('jtable-toolbarsearch-reset')
.attr('colspan',$(".jtable-command-column-header").length);
$resetbutton = $('<input type="button" value="Buscar"/>').appendTo($reset);
$resetbutton.click(function(){
$('.jtable-toolbarsearch').val('');
self.load({});
});
$tr.append($reset);
},
/* Creates a header cell for given field.
* Returns th jQuery object.
*************************************************************************/
_toolbarsearch_createHeaderCellForField: function (fieldName, field) {
var self = this;
if(typeof field.searchable === 'undefined'){
field.searchable = true;
};
field.width = field.width || '10%'; //default column width: 10%.
var $input = this._getColumnDisplay(fieldName,field);
$input.bind('change',function(){
var $q=[];
var $opt=[];
var $postData={};
var $i =0;
$('.jtable-toolbarsearch').each(function(){
var $id = $(this).attr('id');
if($(this).val().length>=1){
$opt.push($id.replace('jtable-toolbarsearch-',''));
$q.push($(this).val());
$i++;
}
});
self.load({'q[]':$q,'opt[]':$opt});
});
var $headerContainerDiv = $('<div />')
.addClass('jtable-column-header-container');
if(field.searchable){
$headerContainerDiv.append($input);
}
var $th = $('<th></th>')
.addClass('jtable-column-header')
.css('width', field.width)
.data('fieldName', fieldName)
.append($headerContainerDiv);
return $th;
},
_getColumnDisplay:function(fieldName,field){
if (field.type == 'date') {
return this._getDisplayDate(fieldName,field);
} else if (field.type == 'checkbox') {
return this._getDisplayCheckBox(fieldName,field);
} else if (field.options) { //combobox or radio button list since there are options.
return this._getDisplayComboBox(fieldName,field);
} else {
return this._getDisplayText(fieldName,field);
}
},
_getDisplayDate:function(fieldName,field){
var displayFormat = field.displayFormat || this.options.defaultDateFormat;
var $input = $('<input id="jtable-toolbarsearch-' + fieldName + '" type="text"/>')
.addClass('jtable-toolbarsearch')
.css('width','90%')
.datepicker({dateFormat:displayFormat});
return $input;
},
_getDisplayText:function(fieldName,field){
var $input = $('<input id="jtable-toolbarsearch-' + fieldName + '" type="text"/>')
.addClass('jtable-toolbarsearch')
.css('width','90%');
return $input;
},
_getDisplayCheckBox:function(fieldName,field){
var $input = $('<input id="jtable-toolbarsearch-' + fieldName + '" type="text"/>')
.addClass('jtable-toolbarsearch')
.css('width','90%')
return $input;
},
_getDisplayComboBox:function(fieldName,field){
var $input = $('<select id="jtable-toolbarsearch-' + fieldName + '"></select>')
.addClass('jtable-toolbarsearch')
.css('width','90%')
for (var option in field.options) {
console.log(field.options[option]);
$input.append('<option value="' + option + '">' + field.options[option] + '</option>');
}
return $input;
}
});
})(jQuery);
答案 0 :(得分：0)
从jquery工具栏中删除修复了问题。
$input.bind('change',function(){
var $q=[];
var $opt=[];
var $postData={};
var $i =0;
$('.jtable-toolbarsearch').each(function(){
var $id = $(this).attr('id');
if($(this).val().length>=1){
$opt.push($id.replace('jtable-toolbarsearch-',''));
$q.push($(this).val());
$i++;
}
});
self.load({'q[]':$q,'opt[]':$opt});
});