Menu
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: 
Ps: My page is in an iframe.
Thanks for your help.
261
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.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
