Javascript JQuery数据表显示隐藏值
下面是我想要完成的：使用datatables我想要显示从数据库中提取的一些信息，然后使用datatables隐藏行详细信息我想要显示其余的信息。第一部分做得很好，工作也很完美，但是第二部分我还没有成功 下面是返回json代码的php代码（我相信它工作得很好）：Javascript JQuery数据表显示隐藏值,javascript,php,jquery,datatable,Javascript,Php,Jquery,Datatable,下面是我想要完成的：使用datatables我想要显示从数据库中提取的一些信息，然后使用datatables隐藏行详细信息我想要显示其余的信息。第一部分做得很好，工作也很完美，但是第二部分我还没有成功 下面是返回json代码的php代码（我相信它工作得很好）： 在我的datatable中，我想显示除状态之外的所有信息，状态将被隐藏 /* * Created by: Sebastian Bonilla * Date: 12-12-2013 * Version: 0.9 */ /*
/*
* Created by: Sebastian Bonilla
* Date: 12-12-2013
* Version: 0.9
*/
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
// Creates the details block
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
// I tried to access states with aData[5] but it didn't work. With any value it says 'undefined'
sOut += '<tr><td>State:</td><td>' + aData[5] + '</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
// return a html formatted string with the data to display
return sOut;
}
$(document).ready(function() {
/*
$('#datatables').dataTable( {
"bProcessing": true,
"sAjaxSource": 'process.php'
} );
*/
// Create object oTable which is a datatable
// makes an ajax call to process.php and populate the headers
var oTable = $('#datatables').dataTable( {
"aaSorting": [[2, 'asc']],
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "process.php",
"aoColumns": [
{
"mData": null,
"aTargets": [0],
"bSerchable": false,
"bSortable": false,
"sDefaultContent": '<div class="expand /">',
"sWidth": "30px"
},
{
"mDataProp": "email",
"aTargets": [1],
"bSearchable": true,
"bSortable": true
},
{
"mDataProp": "lastName",
"aTargets": [2],
"bSearchable": true,
"bSortable": true
},
{
"mDataProp": "firstName",
"aTargets": [3],
"bSearchable": true,
"bSortable": true
},
{
"mDataProp": "dateRegistered",
"aTargets": [4],
"sClass": "center",
"bSearchable": true,
"bSortable": true
}
]
} );
$('#datatables tbody').on('click', 'td div.expand', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
$(this).removeClass('open');
oTable.fnClose(nTr);
} else {$.fn.dataTableExt.sErrMode = 'throw' ;
$(this).addClass('open');
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
});
/*
*创作人：塞巴斯蒂安·博尼拉
*日期：2013年12月12日
*版本：0.9
*/
/*行详细信息的格式化函数*/
函数fnFormatDetails（oTable，nTr）
{
//创建详细信息块
var aData=oTable.fGetData（nTr）；
var sOut=''；
//我试图用aData[5]访问各州，但没有成功。如果有任何值，它都会显示“未定义”
sOut+='状态：'+aData[5]+'；
sOut+=“链接到源代码：可以在此处提供链接”；
sOut+='额外信息：以及此处的任何进一步详细信息（图像等）'；
sOut+=''；
//返回包含要显示的数据的html格式字符串
返回sOut；
}
$（文档）.ready（函数（）{
/*
$（'#datatables'）。dataTable（{
“bProcessing”：正确，
“sAjaxSource”：“process.php”
} );
*/
//创建对象oTable，它是一个数据表
//对process.php进行ajax调用并填充标题
变量oTable=$（'#datatables'）。dataTable（{
“aaSorting”：[[2，‘asc']]，
“bProcessing”：正确，
“bServerSide”：正确，
“sPaginationType”：“完整编号”，
“sAjaxSource”：“process.php”，
“aoColumns”：[
{
“mData”：空，
“目标”：[0]，
“可检测”：错误，
“可移植”：错误，
“sDefaultContent”：“”，
“sWidth”：“30px”
},
{
“mDataProp”：“电子邮件”，
“目标”：[1]，
“可听”：是的，
“可移植”：真
},
{
“mDataProp”：“lastName”，
“目标”：[2]，
“可听”：是的，
“可移植”：真
},
{
“mDataProp”：“firstName”，
“目标”：[3]，
“可听”：是的，
“可移植”：真
},
{
“mDataProp”：“dateRegistered”，
“目标”：[4]，
“sClass”：“中心”，
“可听”：是的，
“可移植”：真
}
]
} );
$（'#datatables tbody'）。在（'click'，'td div.expand'，函数（）{
var nTr=$（this.parents（'tr'）[0]；
if（可旋转FNISOBEN（nTr））{
$（this.removeClass（'open'）；
可旋转。关闭（nTr）；
}else{$.fn.dataTableExt.sErrMode='throw'；
$（this.addClass（'open'）；
fnOpen（nTr，fnFormatDetails（oTable，nTr），“details”）；
}
});
});
谢谢。没关系，我刚想好了 它的工作原理如下：不要使用像aData[5]这样的索引访问字段，而是使用字段名aData['state']和done来访问
/*
* Created by: Sebastian Bonilla
* Date: 12-12-2013
* Version: 0.9
*/
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
// Creates the details block
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
// I tried to access states with aData[5] but it didn't work. With any value it says 'undefined'
sOut += '<tr><td>State:</td><td>' + aData[5] + '</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
// return a html formatted string with the data to display
return sOut;
}
$(document).ready(function() {
/*
$('#datatables').dataTable( {
"bProcessing": true,
"sAjaxSource": 'process.php'
} );
*/
// Create object oTable which is a datatable
// makes an ajax call to process.php and populate the headers
var oTable = $('#datatables').dataTable( {
"aaSorting": [[2, 'asc']],
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "process.php",
"aoColumns": [
{
"mData": null,
"aTargets": [0],
"bSerchable": false,
"bSortable": false,
"sDefaultContent": '<div class="expand /">',
"sWidth": "30px"
},
{
"mDataProp": "email",
"aTargets": [1],
"bSearchable": true,
"bSortable": true
},
{
"mDataProp": "lastName",
"aTargets": [2],
"bSearchable": true,
"bSortable": true
},
{
"mDataProp": "firstName",
"aTargets": [3],
"bSearchable": true,
"bSortable": true
},
{
"mDataProp": "dateRegistered",
"aTargets": [4],
"sClass": "center",
"bSearchable": true,
"bSortable": true
}
]
} );
$('#datatables tbody').on('click', 'td div.expand', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
$(this).removeClass('open');
oTable.fnClose(nTr);
} else {$.fn.dataTableExt.sErrMode = 'throw' ;
$(this).addClass('open');
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
});