我的 Jquery 数据表有问题。基本上我想要一个这样的数据表:Data table example
我在我的代码中导入了这些:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": "Sayfada _MENU_ kayıt göster",
"sZeroRecords": "Kayıt bulunamadı",
"sInfo": "_TOTAL_ kayıttan _START_ - _END_ arası gösteriliyor",
"sInfoEmpty": "toplam 0 kayıt arasında 0 - 0 arası kayıt gösteriliyor",
"sInfoFiltered": "(toplam _MAX_ kayıt arasında filtreleme yapıldı)"
}
});
$("#submit").click(function(event) {
var course = $("#courses :selected").val();
var instructor = $("#instructors :selected").val();
$.ajax({
type:'POST',
url: 'assignCourse.action',
data: { pageAction:"assignCourse" , courseIdStr: course, instructorIdStr: instructor },
success: function(data) {
if (data == null || data == '') {
alert('Ders Atama İşlemi Başarıyla Gerçekleştirildi!');
} else {
alert(data);
}
},
error: function(data) {
alert('İşlem Gerçekleştirilirken Hata Oluştu!');
}
});
});
});
</script>
<title>Ders Atama Modülü</title></head>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<link href="CSS/custom-theme/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="CSS/demo_page.css" rel="stylesheet" type="text/css" />
<link href="CSS/demo_table_jui.css" rel="stylesheet" type="text/css" />
<body>
<h1>Ders Atama Modülü</h1>
</body>
<table>
<tr>
<td class="oyun_yazari" height="30" width="20">Ders:</td>
<td width="200">
<div>
<select id="courses">
<s:iterator value="courseGroups" status="stat">
<option value="<s:property value='courseGroupId'/>"><s:property value='course.name'/> - <s:property value='groupNumber'/>. grup</option>
</s:iterator>
</select>
</div>
</td>
<td class="oyun_yazari" height="30" width="20">Akademisyen:</td>
<td width="274">
<div>
<select id="instructors">
<s:iterator value="instructors" status="stat">
<option value="<s:property value='instructorId'/>"><s:property value='instructorName'/> <s:property value='instructorSurname'/></option>
</s:iterator>
</select>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="submit" name="submit" id="submit" value="Ata"/>
</div>
</td>
</tr>
</table>
<table id=example>
<thead>
<tr>
<th>Ders Adı</th><th>Grup</th><th>Akademisyen</th><th>Sil</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ders Adı</th><th>Grup </th><th>Akademisyen</th><th>Sil </th>
</tr>
</tfoot>
<tbody>
<s:iterator value="assignedInstructors" status="stat">
<tr>
<td><s:property value='courseGroup.course.name'/></td>
<td><s:property value='courseGroup.groupNumber'/></td>
<td><s:property value='instructor.instructorName'/> <s:property value='instructor.instructorSurname'/></td>
<td><input type="checkbox"/></td>
</tr>
</s:iterator>
<!--
<tr>
<td><div><input type="submit" name="sil" id="sil" value=" Seçili Atanmış Dersleri Sil" /></div></td>
</tr>
-->
</tbody>
</table>
</html>
style.css是我的，其他的取自datatable api和jquery css代码。
当我运行该程序时，我得到如下页面:
ps:我的页面在iframe中。
感谢您的帮助。
最佳答案
替换你的 <table>用 <table cellspacing="0px" width="100%"> 标记.或者，您可以将这些添加到您的 css 文件中。 cellspacing 属性将消除行和列之间的空白空间问题。 width 属性是解决正确对齐问题的另一种方法。
如果您仍然遇到列太窄的问题，您可以使用 aoColumns 和 sWidth 参数 ( documentation here) 手动设置列宽。
编辑:此外，如果您使用的是默认的 .css 文件，那么如果您希望鼠标悬停时指针出现在表格标题中，您需要为您的表格提供“显示”类(class)。换句话说，添加 class="display"给你的<table>标签。
关于jQuery 数据表大小调整问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4819005/