0
我試過了,但未能在表格中添加顯示/隱藏額外的細節,所以我想嘗試使用fancybox代替。我想這樣的事情:http://datatables.net/download/點擊數據表與花式框
這已經只是,需要有人來填充觸發器來獲得框顯示,任何幫助將是偉大的。
$(document).ready(function() {
$('a.moreinfo').each(function() {
var that = this;
$(this).fancybox({
"href": "notes.php?notes="+that.href.split('#')[1],
"width": 700,
"height": 500,
"autoDimensions": false
});
});
});
$(document).ready(function()
{
var oTable = $('#example').dataTable
({
'bProcessing': true,
'aaSorting': [[1,'asc']],
'iDisplayLength': 10,
'bJQueryUI': true,
'bServerSide': true,
'sAjaxSource': 'ajax/pc-ajax-table.php',
'fnServerData': function(sSource, aoData, fnCallback)
{
aoData.push({ "name": "from_date", "value": $("#from").val() },
{ "name": "to_date", "value": $("#to").val() });
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
'aoColumns':[
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"fnRender": format_ddmmyyyy},
null,
null,
null,
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
null,
null,
null,
null,
null]
});
// For clicking and selecting the date ranges
$("button").button().click(function() {
oTable.fnDraw();
});
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
});
// Take date from mysql, formatted yyyy-mm-dd, and return as dd/mm/yyyy
function format_ddmmyyyy(oObj) {
var sValue = oObj.aData[oObj.iDataColumn];
var aDate = sValue.split('-');
return aDate[2] + "/" + aDate[1] + "/" + aDate[0];
}
// Highlight Rows
$("tbody tr").live("mouseover", function(){
$(this).children().addClass("highlighted");
});
$("tbody tr").live("mouseout", function(){
$(this).children().removeClass("highlighted");
});
// highlight click
/*$('#example tbody tr').live('click', function() {
$(this).toggleClass('row_selected');
}); */
/* show hide loading gif */
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}
/* on click get lead_id */
function my_onclick(data)
{
showLoading();
$("#content").slideUp(5);
$.post("ajax/pc-details.php",
{'lead_id': data},
function(data)
{
hideLoading();
$("#content").html(data).slideDown(500);
}
);
}
也試圖加入這個頁面上的顯示/隱藏代碼: http://www.datatables.net/blog/Drill-down_rows
有這這麼遠,但,當我點擊details_open按鈕沒有任何反應。
$(document).ready(function()
{
var anOpen = [];
var oTable = $('#example').dataTable
({
'bProcessing': true,
'aaSorting': [[1,'asc']], // sorts date by default.
'iDisplayLength': 10,
'bJQueryUI': true,
'bServerSide': true,
'sAjaxSource': 'ajax/pc-ajax-table.php',
'fnServerData': function(sSource, aoData, fnCallback)
{
aoData.push({ "name": "from_date", "value": $("#from").val() },
{ "name": "to_date", "value": $("#to").val() });
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
},
'aoColumns':[
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"fnRender": format_ddmmyyyy}, // renders the date as dd/mm/yyyy
null,
null,
null,
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
{"bVisible": false, "bSortable": false, "bSearchable": true},
null,
null,
null,
null,
null]
});
// for adding a details box
$('#example td.control').live('click', function() {
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
if (i === -1) {
$('img', this).attr('src', "../images/details_close.png");
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
anOpen.push(nTr);
}
else {
$('img', this).attr('src', "../images/details_open.png");
oTable.fnClose(nTr);
anOpen.splice(i, 1);
}
});
function fnFormatDetails(oTable, nTr)
{
var oData = oTable.fnGetData(nTr);
var sOut =
'<div class="innerDetails">'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+
'<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+
'<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+
'<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+
'<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+
'</table>'+
'</div>';
return sOut;
}
代碼生成圖像:
->add_column('moreinfo', '<span style="cursor:pointer"><img src="../images/details_open.png" alt="img" class="img" name="img"/></span>', 'leads.lead_id')