I have recently found serverside datatables and have implemented it to my page. However when I enabled scrollx, my table width was shrunk to 3/4 of its full size. Also, duplicate empty headers would appear under my current headers and I am unsure of what I can do to remove them. I hope someone can take a look at my configuration and see if something can be improved.
Thank you so much.
<script type="text/javascript">
var table;
$(document).ready(function() {
//datatables
table = $('#table').DataTable({
"scrollX": true,
"processing": true, //Feature control the processing indicator.
"language": {
"processing": '<div class="loading"><div class="content">\n\
<img src="<?php echo base_url().'assets/images/loading/loading.gif'; ?>"/>\n\
</div></div>'
},
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('CTRL/ajax')?>",
"type": "POST",
"data": function(d){
d.agent_code = "agent1";
}
},
//Set column definition initialisation properties.
"columnDefs": [
{
"targets": [ 0 ], //first column / numbering column
"orderable": false, //set not orderable
},
]
});
});
</script>
Related
Trying to work around problem with datatables pagination. The problem is:
I have some code to initialize Datatable in Laravel:
<script>
$(document).ready(function () {
$('.js-dataTable-full').DataTable({
ajax: {
"url": "{{ route('page.data') }}",
"type": "GET",
},
"autoWidth": false,
"serverSide": true,
"pageLength": 5,
"bSort": false,
"searching": true,
// "order": [[1, "desc"]],
"processing": true,
"paging": true,
"pagingType": 'full_numbers',
.......................................
Some text below
The data is loaded correctly, however there's still an issue with pagination.
As you see, the pagination links are not active and cannot be clicked, though text on the left clearly says that there are only 5 of 8 entries on the page.
In the json response total number of items is present:
No ideas by now, so any help would be appreciated.
I would like to get the data of a specific row in my datatables and display it in another page where I edit the contents of the table. I have no idea how to do that. Here is my Javascript.
<script type="text/javascript">
var table;
$(document).ready(function() {
table = $('#table').DataTable({
"responsive": true,
"processing": true,
"serverSide": true,
"order": [],
"ajax": {
"url": "<?php echo site_url('Infoserbilis/ajax_list')?>",
"type": "POST"
},
"columnDefs": [{
"targets": [13], //first column / numbering column
"orderable": false,
"data": "download_link",
"render": function(data, type, full, meta) {
return 'Edit';
}, //set not orderable
}, ],
});
});
</script>
I am creating jquery Datatable dynamically. ColumnNames and Rows Values are coming from Server side using Ajax call. Now, I need this datatable to be reinitialized everytime, so I used property "bDestroy": true, on every ajax call but after first display, DOM is getting broken. Here is my code
$('#JDatadt').dataTable({
"order": [],
"dom": "Bfrtip",
"buttons": ["csv", "excel", "pdf"],
"columnDefs": [{ "className": "dt-center", "orderable": false, "width": 20 }],
"bInfo": false,
"paging": true,
"processing": true,
"bDestroy": true,
"columns": dataObject[0].columns,
"data": dataObject[0].data
});
What is getting wrong here. Please help
Datatable by default try to sort column with index 0 if not specified.
if you don't want to sort by default with any column just add
"aaSorting": [[ ]] ,
you can destroy table by using fnDestroy() function of datatable. it will surely works for you.
I'm using jquery data table to display large amounts of data inside grid. I implemented server side pagination but I'm struggling with sorting data server side.
Below is my datatable initialization, answer with query for sorting is not the subject here, I just need a way to pass information of which column is clicked to the controller, the one upon I will do the sorting.
('#myTable').dataTable({
"processing": true,
"serverSide": true,
"info": false,
"pageLength": 10,
"lengthChange": false,
"stateSave": false,
"bPaginate": true,
"bFilter": false,
"sPaginationType": "full_numbers",
"info": "Page _PAGE_ from _PAGES_",
"infoEmpty": "No data",
"oPaginate": {
"sFirst": "First",
"sPrevious": "Previous",
"sNext": "Next",
"sLast": "Last"
},
"ajax": {
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/MyController/GetData",
"type": "GET",
"data": function (d) {
.....
},
},
preDrawCallback: function (settings) {
...
},
drawCallback: function (settings) {
...
},
"columns": [
{ "data": "Id" },
{ "data": "FirstName" },
{ "data": "LastName" },
{ "data": "Age" }
],
"columnDefs": [
{
targets: [0],
orderable: false
},
{
render: function (data, type, row) {
...
}
],
"order": [[0, "desc"]]
});
public ActionResult GetData(){
var sortColumn = ...
...
}
You can bind the 'order' event like this:
$('#myTable').on( 'order.dt', function () {
var order = table.order();
var column_selected = order[0][0];
var order_way= order[0][1];
doStuff(column_selected ,order_way);
});
See it in plugin reference
By specifying "serverSide": true,, datatables will by default add information to the request which you need to use in your server-side code. If you look in the Firebug Network panel, you will be able to see the request with the querystring parameters. See here for the full list of parameters. Note that the link is to the v1.9 documentation, because that's what it looks like you're using.
So for sorting, you'd be interested in iSortCol_0 and sSortDir_0 which relate to the clicked column and the sort direction respectively.
In your controller method, you would access the parameters like this:
var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
var sortColumnDir = Request["sSortDir_0"];
You then need to incorporate this, and the other parameters into your query.
Here is an article on using server-side datatables with MVC
I have created a datatable with the following code
$(document).ready( function () {
$('#data-table').DataTable( {
"bFilter": false,
"scrollY": 300,
"scrollX": true,
"paging": false,
"ordering": false,
"info": false,
"columnDefs": [
{ "width": "20%", "targets": 0 }
]
});
} );
Note that I have the widths set to 20% for each of the columns. My question is how do I specify a width for column 1 while still being able to set a width for the rest of the columns?
I've seen examples like this on the datatable website:
$('#example').dataTable( {
"columns": [
{ "width": "20%" },
null,
null,
null,
null
]
} );
But I do not think this will work for me because it looks as if it would require me to know how many columns my table has in advance, and user requirements require the number of columns to be variable.
Try replacing your columnDefs part with this (and adding the appropriate percentages):
"columnDefs": [
{ "width": "(percentage)%", "targets": "_all" }
{ "width": "(other percentage)%", "targets": 0 }
]
This will set the first column to one width and the others to a different width.
Targets define which column will be affected. Setting it as an integer will affect the columns starting from left to right (i.e. '"targets": [0, 1]' would affect the leftmost and second-leftmost columns). Negative integers affect the columns from right to left. The string "_all" will affect all columns.