2011-01-27 320 views
3

我的Jquery Datatable出现问题。基本上我想有一个这样的数据表:Data table examplejQuery Datatable调整大小问题

我进口这些在我的代码:

<%@ 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的是我的,其他从数据表中的API和jQuery的CSS代码取。

当我运行程序时,我得到这样一个页面:screenshot Ps:我的页面在iframe中。

感谢您的帮助。

+0

我已经解决了正确的问题与添加“sScrollY”属性datable(但我仍然不知道是什么问题)另一方面,我仍然有列的问题,上下按钮是在一些列('Grup'和'Sil'columns)和他们的widht应该自动调整大小,但没有。 – kamaci 2011-01-27 17:22:11

+0

另外我意识到,当我想对数据表的示例的网页鼠标coursor属性的指针进行排序,但在我的代码不是。 – kamaci 2011-01-27 17:28:04

回答

2

<table cellspacing="0px" width="100%">替换您的<table>标签。或者,您可以将这些添加到您的css文件。 cellspacing属性将消除行和列之间空白空间的问题。 width属性是另一种可以解决正确对齐问题的方法。

如果您仍然遇到列太窄的问题,可以使用aoColumns和sWidth参数(documentation here)手动设置列宽。另外,如果您使用的是默认的.css文件,那么如果您希望指针在悬停时出现在表头中,则需要为您的表提供“显示”类。换句话说,将class="display"添加到您的<table>标签。