I am trying to sort in datatable but, i couldn't understand how to do it. let me show what i tired to do with my code.
$(document).ready(function() {
$('#table').DataTable();
} );
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" type="text/css" media="all" />
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Stock</th>
<th>Rate</th>
</tr>
</thead>
#if($trades)
#foreach($trades as $trade)
<tbody>
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
</tbody>
#endforeach
#endif
</table>
I worked hard but unable to find what i have not done.
I think you need to move your #foreach to be inside of your <tbody> like this:
<tbody>
#foreach($trades as $trade)
<tr>
<td>{{$trade->stock}}</td>
<td>{{$trade->rate}}</td>
</tr>
#endforeach
</tbody>
To get the sorting to work, you'll have to add an option to your javascript like this:
$(document).ready(function() {
$('#table').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Which will order your table by the 4th column (since the 3 in the above example starts counting indexes at 0) in descending order. Reference - https://datatables.net/examples/basic_init/table_sorting.html
Related
I am using jQuery DataTables and I have multiple columns with dates, the current data is in this format 2020-06-18 14:32:45.707 and I want to format it and display it as 18/06/2020 14.32.
I applied datetime plugin in DataTables, but still can't make it work.
Currently I am using :
render: function(data) {
return moment(data).format('DD/MM/YYYY HH:mm');
}
Which is working fine. But I want to use render:
render: $.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')
I have included moment.js and datetime.js as the documentation says and I should apply:
$.fn.dataTable.render.moment(to);
My dates are shown as 'invalid date' in my table when i use this method.
below is a demo.
Could you please explain me what am I doing wrong with?:
$.fn.dataTable.render.moment('DD/MM/YYYY HH:mm')
I have the other method working, but I want to learn from my mistakes as I spend much time investigating and couldn't figure out the issue. Thank you very much.
$(document).ready(function() {
$('#example').DataTable({
"columnDefs": [{
//render: $.fn.dataTable.render.moment( 'DD/MM/YYYY HH:mm' )
"render": function(data) {
return moment(data).format('DD/MM/YYYY HH:mm');
},
"targets": 1
}]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>date before format</th>
<th>date after format</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020-06-18 14:32:45.707</td>
<td>2020-06-18 14:32:45.707</td>
</tr>
</tbody>
</table>
Your issue is here:
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
}
The default FROM is 'YYYY-MM-DD', you need to specify YOUR source format.
const FROM_PATTERN = 'YYYY-MM-DD HH:mm:ss.SSS';
const TO_PATTERN = 'DD/MM/YYYY HH:mm';
$(document).ready(function() {
$('#example').DataTable({
columnDefs: [{
render: $.fn.dataTable.render.moment(FROM_PATTERN, TO_PATTERN),
targets: 1
}]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.21/dataRender/datetime.js"></script>
<table id="example" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>date before format</th>
<th>date after format</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020-06-18 14:32:45.707</td>
<td>2020-06-18 14:32:45.707</td>
</tr>
</tbody>
</table>
I have below code in my GetCourseList.cshtml file (view) that show fetched information from database :
#model IEnumerable<WebApplication8.Models.Courses>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width" />
<title>GetCourseList</title>
<style>
.table thead th,
.table tbody td {
text-align: center;
}
</style>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="border-top-0 text-center">course name</th>
<th scope="col" class="border-top-0">unit</th>
<th scope="col" class="border-top-0">term</th>
<th scope="col" class="border-top-0">choose</th>
<th scope="col" class="border-top-0"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="align-middle">#item.name</td>
<td class="align-middle">#item.unit</td>
#if (item.term == 0)
{
<td class="align-middle">custom</td>
<td>
<input class="btn btn-success" type="checkbox" value=#item.name id=#item.course_id/>
</td>
}
else
{
<td class="align-middle">#item.term</td>
<td><input type="checkbox" value=#item.name id=#item.course_id /></td>
}
<td class="text-right align-middle">
#*<button type="button" class="btn btn-success">choose</button>*#
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
and I get below result from this view when I run the project :
I want that user choose favorite records , with those checkboxes , and then when pressed final button (this button is out of frame in my picture), id of this checkboxes insert in my database(related table).
think I should get checked checkboxes id's from my html page (but I don't know how?! please help me!) and pass this id's to the action and then execute insert query in my action .
so : I should pass each checked checkboxes id to the specific controller and collect them (for example collect all elements id's in an array) some one tell's me that i can map my view elements to the this array . but I don't give result from this approach . this is issue!
please help me to find out how can I do this . thank you
you can add property IsSelect in Model
Public bool IsSelect {get;set;}
and used
#Html.CheckBoxFor(m => m.IsSelect)
and in server checked which one of items selected
var idList = items.Where(x=>x.IsSelect).Select(x=>x.Id).ToList();
i was trying to learn key-focus in my jquery Datatables but it doesn't work. Here is my simple piece of code. can anyone please help me know what's the problem ?
This is my HTML file :
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="tableScript.js"></script>
<meta charset="UTF-8">
</head>
<body>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<div id="details"></div>
</body>
</html>
This is my JS file (tableScript.js) :
$(document).ready(function() {
var table = $('#example').DataTable( {
keys: true
} );
table
.on( 'key-focus', function ( e, datatable, cell, originalEvent ) {
var rowData = datatable.row( cell.index().row ).data();
$('#details').html( 'Cell in '+rowData[0]+' focused' );
} )
.on( 'key-blur', function ( e, datatable, cell ) {
$('#details').html( 'No cell selected' );
} );
});
It doesn't show any information in (#details). Any idea what's wrong here ?
$(document).ready(function () {
var table = $('#example').DataTable({
keys: true
});
table
.on('key-focus', function (e, datatable, cell, originalEvent) {
var rowData = datatable.row(cell.index().row).data();
$('#details').html('Cell in ' + rowData[0] + ' focused');
})
.on('key-blur', function (e, datatable, cell) {
$('#details').html('No cell selected');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src='https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js'></script>
<table id = "example" style="width:100%">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tfoot>
<tr>
<th align="right">Count</th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="details"></div>
Note :- You need to add dataTables.keyTable to bind key events
I am working with angularjs data table where I don't need sorting for all the columns. So I want to disable sorting for specified columns. I want to disable sorting for column no. 2 and 4 for the below case.
var app = angular.module('myApp',['datatables']);
app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder) {
$scope.list = [
{"eid":"10","ename":"nam1","sales":"20"},
{"eid":"20","ename":"nam2","sales":"20"},
{"eid":"30","ename":"nam3","sales":"20"},
{"eid":"40","ename":"nam4","sales":"20"}
];
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
<script src="http://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css">
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
<thead>
<tr>
<th>Employee ID</th>
<th>name</th>
<th>sales</th>
<th>details</th>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{ data.eid }} </td>
<td> {{ data.ename }} </td>
<td> {{ data.sales }} </td>
<td>view</td>
</tr>
</tbody>
</table>
</div>
Today I got the same issue and here is the what I have found; In my case I wanted to remove sorting feature from first column since it just contain a check box.
According to the official documentation this is the code block;
app.controller('exceptionViewCtrl', ['$scope', 'DTColumnDefBuilder', function ($scope, $routeParams, DTColumnDefBuilder) {
$scope.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0).notSortable()];
}]);
But this is not worked; Then I figure out even if I disable sorting for a column, the dataTables sort order still remain. By default order is [0, 'asc']. So you need to additionally set order to target some other column instead.
So the complete html+angular code as follows;
HTML
<table datatable="" id="example2" class="table table-bordered table-hover" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
// table data
</table>
Angular
app.controller('exceptionViewCtrl', ['$scope', 'DTColumnDefBuilder', 'DTOptionsBuilder', function ($scope, DTColumnDefBuilder, DTOptionsBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('order', [1, 'asc']);
$scope.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0).notSortable()];
}]);
try it:
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
});
I want to add rows to the datatable when the page is displayed using a javascript array.
I am trying to figure this out, but the row does not get add. Any help is appreciated..
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Your code works fine, but only with version 1.9.x (or earlier) of the plugin.
$('#dataTables-example').DataTable().fnAddData([
'1', '1', '1'
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Following the examples on the datatables.net web site for the latest version (1.10.x):
$('#dataTables-example').DataTable().row.add([
'1', '1', '1'
]).draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table class="table table-striped table-bordered table-hover" id="dataTables-example" border="1">
<thead>
<tr>
<th>Host</th>
<th>Method</th>
<th>SSL</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
From the API, this is one of the ways to add rows:
var dataTable = $('#dataTables-example').DataTable();
dataTable.row.add(['1','1','1' ]).draw();
Demo#Fiddle
To address the reinitialization warning challenge when using DataTables, you may want to try the retrieve option. www.datatables.net/manual/tech-notes explains how it works. You can read about Retrieve here.
In acknowledgement that the above code structure isn't always particularly
attractive, DataTables as a retrieve [DT] option which can be used to tell
DataTables that you are aware that the initialisation options can't be
changed after initialisation, and that should that occur, that you
just want the DataTable instance to be returned.
This optional parameter can provide a short-cut to the explicit check
using $.fn.dataTable.isDataTable() as above when obtaining a
DataTables instance:
table = $('#example').DataTable( {
retrieve: true,
paging: false } );
Maybe you can generate the row before and then append it to the tbody just using jQuery
$("#dataTables-example > tbody").append("<tr><td>row content</td></tr>");