3

我的 Jquery 数据表有问题。基本上我想要一个这样的数据表:数据表示例

我在我的代码中导入了这些:

<%@ 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 中。

谢谢你的帮助。

4

2 回答 2

2

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

如果您仍然遇到列太窄的问题,您可以使用 aoColumns 和 sWidth 参数手动设置列宽(此处的文档)。

编辑:另外,如果您使用默认的 .css 文件,那么如果您希望指针在悬停时出现在表头中,则需要为您的表指定“显示”类。换句话说,添加class="display"到您的<table>标签中。

于 2011-01-27T18:26:05.857 回答
-1

对列标题进行排序。

简短的回答是应用样式表demo_page.css

演示表.css

严格来说, demo_page.css 中的几行是必需的。

于 2012-09-10T05:11:03.433 回答