Я использую пользовательский интерфейс jQuery с примененной темой к элементу datatables.net.К сожалению, этот элемент находится в контейнере 'tabs', и пользовательский интерфейс jquery (хотя и необходим для внешнего вида интерфейса datatables.net) испортил все остальное.
Я не смог найти, могут ли они быть независимымидруг друга?
Удача в прошлом?
Пример кода:
Пользователь щелкает ссылку, которая открывает модальное окно.В этом окне файл index.php называется:
index.php - head
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({
spinner: '',
select: function(event, ui) {
var tabID = "#ui-tabs-" + (ui.index + 1);
$(tabID).html("<b>Fetching Data.... Please wait....</b>");
},
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Error: Could not retrieve information. Please contact Technical Support at XXXX." );
}
}
});
});
</script>
index.php - body
<div id="tabs">
<ul>
<li><a href="#pre_loaded">General Information</a></li>
<li><a href="link1.php">Page 1</a></li>
<li><a href="link2.php">Page 2</a></li>
</ul>
<div id="pre_loaded">
Please navigate using the tabs above for more information
</div>
</div>
, если пользователь щелкаетна tab2 делается вызов для получения page2.php.Страница 2.php содержит элемент datatables.net (и, следовательно, включает в себя результат js)
page2.php
<!-- // General meta information -->
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/flick/jquery-ui.css" media="all" />
<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="../../examples_support/details_open.png">';
nCloneTd.className = "center";
$('#sortable thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#sortable tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
$('#sortable tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
this.src = "../../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "../../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
oTable = $('#sortable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"aaSorting": [[ 3, "asc" ]],
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'
});
} );
</script>