dataTable funtion(fixedColumns) is not working.......
dataTable funtion(fixedColumns) is not working.......
rimrim
Posts: 6Questions: 3Answers: 0
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<script
src="/resources/template/lib/multiPriceSource/DataTables-1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css"
href="/resources/template/lib/multiPriceSource/DataTables-1.10.22/css/jquery.dataTables.css" />
<script
src="/resources/template/lib/multiPriceSource/DataTables-1.10.22/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="/resources/template/lib/multiPriceSource/DataTables-1.10.22/css/dataTables.bootstrap4.min.css" />
<script
src="/resources/template/lib/multiPriceSource/FixedColumns-3.3.2/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css"
href="/resources/template/lib/multiPriceSource/FixedColumns-3.3.2/fixedColumns.dataTables.min.css" />
<link rel="stylesheet" type="text/css"
href="/resources/template/lib/multiPriceSource/FixedColumns-3.3.1/css/fixedColumns.bootstrap4.min.css" />
<script src="/resources/template/lib/multiPriceSource/jquery-3.5.1.js"></script>
<!-- <script src="/resources/template/lib/multiPriceSource/jquery.min(2.1.3).js"></script> -->
<!-- <link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" />
<script type="text/javascript"
src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script> -->
<!-- <script type="text/javascript"
src="/resources/template/lib/multiPriceSource/datatables.min(1.10.10).js"></script> -->
<!-- <script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script type="text/javascript"
src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css" /> -->
<script type="text/javascript"
src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" />
<script type="text/javaScript" defer="defer">
$(document).ready(function() {
DT();
});
/* var table = $('#example').DataTable({
dom : 'Blfrtip',
buttons : [ {
extend : 'csvHtml5',
text : 'Export CSV',
footer : true,
className : 'exportBtn'
} ],
scrollY : 300,
scrollX : true,
scrollCollapse : true,
columnDefs : [ {
orderable : false,
targets : 0
}, {
orderable : false,
targets : -1
} ],
ordering : [ [ 1, 'asc' ] ],
colReorder : {
fixedColumnsLeft : 1,
fixedColumnsRight : 1
},
paging : false
});
new $.fn.dataTable.FixedColumns(table, {
leftColumns : 1,
rightColumns : 1
});
}); */
function DT() {
var table = $('#example').DataTable({
dom : 'Blfrtip',
buttons : [ {
extend : 'csvHtml5',
text : 'Export CSV',
footer : true,
className : 'exportBtn'
} ],
scrollY : 300,
scrollX : true,
scrollCollapse : true,
paging : false,
fixedColumns: {
leftColumns: 2
}
});
}
</script>
<style>
th, td {
white-space: nowrap;
text-align: center;
}
table {
border-spacing: 0;
}
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
<br>
<br>
<br>
<br>
<!-- <table id="example" class="stripe row-border order-column"
style="width: 100%"> -->
<table id="example" class="display nowrap" style="width: 100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly@datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
<tr>
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
<td>4804</td>
<td>b.williamson@datatables.net</td>
</tr>
<tr>
<td>Herrod</td>
<td>Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
<td>9608</td>
<td>h.chandler@datatables.net</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>r.davidson@datatables.net</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>c.hurst@datatables.net</td>
</tr>
</tbody>
</table>
I am testing a datatable in my project. For testing purposes, I am using the fixed column example code from the official website of the data table, but the column is not fixed.
Even if I invest the time of 2 days, I can't get the answer. Please give me some advice
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has accepted answers - jump to:
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Doesn't look like you are loading
dataTables.fixedColumns.min.js. You have it in line 17 above but that is before jquey.js so its not loading. You also have it in line 39 but that looks to be commented out from line 32. The include files need to be loaded in the proper order.The place to start is to make sure you have all your CSS and JS include files in the proper order. jquery.js needs to be first followed by datatables.js then all of the extensions. The easiest way to do this is to use the Download Builder.
Kevin
@rimrim You've posted this three times now - please only post to a single thread.