我有一个包含搜索表单的索引文件。搜索的结果是一个表。我在 index.php 中的原始表使用数据表,样式和功能都很完美。这是我的 index.php 文件的一部分,它显示了从 searchDate.php 文件的结果中获取的结果: 从: 到:
<select name="dateOption" id="dateOption">
<option value="order"> Order </option>
<option value="inventory"> Inventory </option>
<option value="po"> PO# </option>
</select>
<input type="text" name="searchinput" id="searchinput" />
<input type="button" value="SUBMIT" onclick="getDate();" />
</form>
这里是 getDate() 函数:
function getDate() {
$.post('searchDate.php' , { dateKey: $("#searchinput").val(),
selected: $("#dateOption").val(),
from: $("#date").val(),
to: $("#date2").val()
},
function(output) {
$('#mainTable').empty();
$('#orderSearch').empty();
$('#newOrder').empty();
$(".line").hide();
$("#loadNewInvoice").hide();
$('#searchResult').append(output);
$('#searchResult').css('display','block');
$('#searchResult').show("blind");
});
}
结果是一个与我原来的工作表具有相同 ID 和类的表。但是,结果不起作用并且没有样式。 先感谢您。 编辑: 这是 css 和我的数据表配置以防万一:
table.display {
margin: 0 auto;
clear: both;
width: 100%;
}
table.display thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
* cursor: hand;
}
table.display tfoot th {
padding: 3px 18px 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}
table.display tr.heading2 td {
border-bottom: 1px solid #aaa;
}
table.display td {
padding: 3px 10px;
}
table.display td.center {
text-align: center;
}
数据表:
$(document).ready( function () {
var oTable = $('#theTable').dataTable({
"bPaginate": true,
"bScrollCollapse": true,
"iDisplayLength": 15,
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumnDefs": [
{ "asSorting": [ "desc" ], "aTargets": [ 0 ] }
]
} );
最佳答案
我之前遇到过同样的问题。 Jquery 要求您的所有 ID 在页面中都是唯一的。如果不遵守这条规则,它根本行不通!
因此,如果您更改表的 ID,您的代码应该会按预期工作。
关于php - ajax 输出没有样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11807824/