jQuery Datatable Resizing Problems

Question

I have a problem with my Jquery Datatable. Basically I want to have a datatable like that: Data table example

I imported these at my code:

<%@ 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 is mine, others are taken from datatable api and jquery css codes.

When I run the program I get a page like these: screenshot Ps: My page is in an iframe.

Thanks for your help.

I have solved alignment to right problem with adding "sScrollY" property to datable(however I still don't know what was the problem) On the other hand I still have problem with columns, up and down buttons is under some columns('Grup' and 'Sil'columns) and their widht should be resized automatically but didn't. — kamaci, Jan 27 '11 at 17:22
Also I realized that when I want to sort columns at datatable example's webside mouse coursor property is pointer but at my code doesn't. — kamaci, Jan 27 '11 at 17:28
This is a related question: http://stackoverflow.com/questions/5590778/how-to-set-column-widths-to-a-jquery-datatable — Kenny Meyer, Jul 17 '11 at 22:47

score 2 · Answer 1 · answered Jan 27 '11 at 18:26

Replace your <table> tag with <table cellspacing="0px" width="100%">. Alternatively, you could add these to your css file. The cellspacing attribute will eliminate your problem of the empty space between the rows and columns. The width attribute is another way you could solve the right alignment problem.

If you are still having issues with the columns being too narrow, you can manually set the column widths with the aoColumns and sWidth parameters (documentation here).

edit: Also, if you are using the default .css files, then if you want the pointer to appear in the table header when you hover, you need to give your table the 'display' class. In other words, add class="display" to your <table> tag.

Sydwell · Answer 2 · 2012-09-10T08:03:13.840

-1

To sort out the column titles.

The short answer is to apply the style sheet demo_page.css and

demo_table.css.

Strictly speaking couple lines in demo_page.css is required.

edited Sep 10 '12 at 08:03

answered Sep 10 '12 at 05:11

Sydwell

4,954
1
33
36

And which lines are those couple? – 2rs2ts Nov 27 '13 at 19:50

jQuery Datatable Resizing Problems

2 Answers2