Question

我尝试动态地将Page2.html中的html内容调用到Page1.html：（使用数据表https://datatables.net/）

Page1.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">

  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

</head>
<body>

<input type="button" onClick="loadData()" value="load">
<div id="contenuPage2"></div>


</body>
<script>



function loadData(){

    $('#contenuPage2').load('Page2.html #example');
}

//data
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
];


$(document).ready(function() {

    $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
} );



</script>

Page2.html

<table id="example" class="display" cellspacing="0" width="100%"></table>

但是这种方法不起作用（当我点击加载按钮时）

最终结果必须如下：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css">

  <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>

</head>
<body>


<table id="example" class="display" cellspacing="0" width="100%"></table>

</body>


<script>

//contenu de ma dataTable
var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
];


$(document).ready(function() {

    $('#example').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    } );   
} );
</script>
</html>

如何从Page1.html

中的Page2.html正确调用DataTable

感谢您的帮助。

（对不起我的英文）

Answer 1

您的问题很可能是在将表插入页面（DOM）之前调用dataTable函数。如果$('#example')没有返回任何DOM元素（它将在页面加载时返回），那么dataTable将无法运行任何内容。

您应该使用带回调函数的AJAX请求并在那里调用dataTable：

$.get('Page2.html', function(resp) {

var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
];
var example = $(resp).find('#example');
$('#contenuPage2').html(example);

$('#example').dataTable( {
  "data": dataSet,
  "columns": [
      { "title": "Engine" },
      { "title": "Browser" },
      { "title": "Platform" },
      { "title": "Version", "class": "center" },
      { "title": "Grade", "class": "center" }
  ]
});  
);

加载DataTable内容而不会失去对来自其他页面的Javascript的控制

1 个答案: