I display a chart but I have to specify that my th column is (scope=row) in javascript code.
The chart used in this manner, Html code (example of using) :
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.visualize.plugin.js"></script>
<link type="text/css" rel="stylesheet" href="base.css"/>
<link type="text/css" rel="stylesheet" href="jquery.visualize.plugin.css"/>
<script type="text/javascript">
$(function(){
$('table').visualize({type: 'line'}).appendTo('body');
});
</script>
</head>
<body>
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">2010</th>
<th scope="col">2011</th>
<th scope="col">2012</th>
<th scope="col">2013</th>
<th scope="col">2014</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Gastro</th>
<td>10</td>
<td>20</td>
<td>30</td>
<td>40</td>
<td>50</td>
</tr>
<tr>
<th scope="row">Pneumo</th>
<td>20</td>
<td>30</td>
<td>20</td>
<td>40</td>
<td>40</td>
</tr>
<tr>
<th scope="row">Procto</th>
<td>80</td>
<td>90</td>
<td>60</td>
<td>100</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>
You can see that in tbody, for the th tags, we used scope="row".
I use a datatTable to fill the table and I want to know how to specify it in javascript code.
My javascript code :
function fillDataTable(data) {
if ($("#table_campaigns").css("visibility") == "hidden")
$("#table_campaigns").css("visibility", "visible");
$('#table_campaigns').dataTable({
'aaData': data,
'aoColumns': [
{ "sTitle": "", "sCellType": "th", "fnCreatedCell": function (cell) { cell.scope = 'row';}},
{ "sTitle": "2010" },
{ "sTitle": "2011" },
{ "sTitle": "2012" },
{ "sTitle": "2013" },
{ "sTitle": "2014" }
],
"iDisplayLength": 10,
"bJQueryUI": true,
"bDestroy": true,
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
});
}
I tested too $(tbody>th).attr('scope','row') but in vain.
Here is my chart :
This way works for me:
$('table tbody th').attr('scope','row');
You only want to use > when looking for direct childrens. th is not a direct children of tbody.
Also, you need to add quotes.
Live example
Related
Upon loading my table page, I want the table to be completely hidden.When I load the page, I want to filter the data and display the headers and related data based on the selected filter.
I am able to hide the table upon page load as well as filter it.
My issue:
Although the filter works, I am having trouble displaying the headers along with the related rows when Select Location is selected.
I would like to remove the gray line that appears upon page load.
Please see the sample code here: http://live.datatables.net/milazige/6/edit
$(document).ready(function () {
// hide tbody on load
$('#example tbody').hide();
$('#example thead').hide();
var table = $('#example').DataTable({
paging: false,
searching: true,
lengthChange: false,
responsive: false,
scrollX: true,
bInfo: false,
bSort: false,
"language": {
"zeroRecords": ""
}
});
$('#table-filter').on('change', function () {
// show the tbody when the user clicks on a filter option
$('#example thead').show();
$('#example tbody').show();
table.search(this.value).draw();
});
});
.dataTables_wrapper .dataTables_filter {
padding-bottom: 16px;
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
</head>
<body>
<p>Select: <select id="table-filter">
<option>Location</option>
<option>Dallax, TX</option>
<option>Boston, MA</option>
<option>Sandy, UT</option>
<option>Washington, DC</option>
<option>Omaha, NE</option>
</select>
</p>
<table id="example" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
<tr>
<th>Location</th>
<th>Name</th>
<th>Job</th>
<th>Salary</th>
</tr>
</thead><tbody>
<tr>
<td>Dallax, TX</td>
<td>test1</td>
<td>5</td>
<td>16</td>
</tr>
<tr>
<td>Boston, MA</td>
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr>
<td>Sandy, UT</td>
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>Washington, DC</td>
<td>test4</td>
<td>test4</td>
<td>test4</td>
</tr>
<tr>
<td>Omaha, NE</td>
<td>test5</td>
<td>test5</td>
<td>test5</td>
</tr>
</tbody></table>
I am using a data table similar as.
$(document).ready(function() {
var table = $("#example").DataTable({
"order": [ 1, "asc" ],
// "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']],
"pageLength": -1,
"lengthChange": false,
"bFilter": "false",
"searchable": false,
orderCellsTop: true,
"bPaginate": false,
"bInfo": false
});
$('.filterRow th').each( function (i) {
var title = $(this).text();
var select = $('<select><option value="">All</option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
var term = $(this).val();
table.column( i ).search(term, false, false ).draw();
} );
let includedArr = [];
let colData = table.column( i ).data().unique().sort().each( function ( d, j ) {
if(d != ""){
d = d.replace("<del>","").replace("</del>","");
if( $.inArray(d, includedArr) < 0 ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
includedArr.push = d;
}
}
});
} );
} );
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%">
<tbody>
<tr>
<td>N</td>
<td>101</td>
<td>1</td>
<td>01</td>
<td>10</td>
<td>20</td>
</tr>
<tr>
<td>N</td>
<td>102</td>
<td>1</td>
<td>02</td>
<td>(20)</td>
<td>20</td>
</tr>
<tr>
<td>N</td>
<td>103</td>
<td>1</td>
<td>03</td>
<td>
<del>10</del>
</td>
<td>20</td>
</tr>
</tbody>
<thead>
<tr>
<th rowspan="2">Bldg</th>
<th rowspan="2">Unit</th>
<th rowspan="2">Floor</th>
<th rowspan="2">Stack</th>
<th colspan="2">
Floor Level
</th>
</tr>
<tr>
<th>Floor 1</th>
<th>Floor 2</th>
</tr>
<tr class="filterRow">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
You can run the code and check on the select option of Floor 1 column, currently there it is showing double 10 option. But, it should have only one. Actually, there are this two options: 10 and '10'. Because of this del tag it considered as two options, however, I want to show just 10.
So, I tried by removing <del> tag but still, it is showing 3 options on the select field.
I need to save all the data that is in my datatable
How could I add a general button that keeps everything in my datatable?
This in my current Project :
var table = $('#listaDocumentos').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf'
],
language: {
"decimal": "",
"emptyTable": "No hay información",
"info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
"infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
"infoFiltered": "(Filtrado de _MAX_ total entradas)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Mostrar _MENU_ Documentos",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "Sin resultados encontrados",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Siguiente",
"previous": "Anterior"
}
}
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<table id="listaDocumentos" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
What i understand from your question is
you need to save data which is currently showing in the view(Html page) as tabular format.
In this case you can use jquery or javascript like below to get the data.
var table = $("table tbody");
table.find('tr').each(function (i) {
// comment loop through the tr and get value of every td within this tr tag
var tds = $(this).find('td');
var Name = $tds.eq(0).text();
var Position = $tds.eq(1).text();
var office = $tds.eq(2).text();
var age = $tds.eq(3).text();
var startPosition = $tds.eq(4).text();
var salary = $tds.eq(5).text();
});
Then bind a button in view like
<input type="button" id="btn_data_save" value="Save Data"/>
Then an ajax call to pass the data to server. WIthin that call you need to collect all the value and build an array of object.
$(document).on('click','#btn_data_save', function(){
var ary=[];
var table = $("table tbody");
table.find('tr').each(function (i) {
var obj={};
obj.tds = $(this).find('td');
obj.name = $tds.eq(0).text();
obj.position = $tds.eq(1).text();
obj.office = $tds.eq(2).text();
obj.age = $tds.eq(3).text();
obj.startPosition = $tds.eq(4).text();
obj.salary = $tds.eq(5).text();
ary.Push(obj);
});
$.ajax({
type: 'POST',
url: '',
data: { list: JSON.stringify(ary) },
dataType: 'json',
success: function (data) {
}
});
});
Finally in controller
[HttpPost]
public ActionResult SaveData(string list)
{
//comment do your work
}
Please comment if you do not understand the solution. i will describe if necessary.
I have this html table:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered" id="resourcesActivitysTable">
<thead>
<tr>
<th>Order</th>
<th>Priority</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>SomeString</td>
<td>1</td>
<td>28.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>3</td>
<td>20.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>1</td>
<td>27.09.2018</td>
</tr>
</tbody>
</table>
This is my Datatable Configuration:
$('#resourcesActivitysTable').dataTable({
//"order": [[ 1, 'asc' ]],
"aaSorting": [[1, "asc"]],
"iDisplayLength": 10,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"language": {
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen...",
"sProcessing": "Bitte warten...",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden.",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
}
},
"fnDrawCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var table = $('#resourcesActivitysTable').DataTable()
table.rows().every(function (rowIdx, tableLoop, rowLoop) {
var data = this.data();
// getOrderStatus(data.orderID);
});
}
});
The Datatable sort the Data by the second column (Priority).
My problem is, if the Priority is the same, the table should be sorted by the Date column.
This is my wish result:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered" id="resourcesActivitysTable">
<thead>
<tr>
<th>Order</th>
<th>Priority</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>SomeString</td>
<td>1</td>
<td>27.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>1</td>
<td>28.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>3</td>
<td>20.09.2018</td>
</tr>
</tbody>
</table>
Anyone here an idea how i can sort the Table Data by Date if the priority is the same?
We can able to do sorting with multiple columns in datatable. Please check below code,
"order": [[ 0, 'desc' ],[ 1, 'asc' ]]
In the above, 0 indicates the first column in a table. 1 indicates the second column.
Datatable Fixed column is not working
Scrollbody width and table widths are coming as equal. So I am not getting the horizontal scroll bar for the fxed columns.
we are using " jquery.dataTables.min-1.9.4.js" and Fixedcolumns (3.0.1).js.
html and javascript:
<html>
<head>
<script src="datatables/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="datatables/jquery.dataTables.min-1.9.4.js" type="text/javascript"></script>
<script src="datatables/extras/FixedColumns.js" type="text/javascript"></script>
<link href="datatables/css/dataTables.fixedColumns.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/jquery.dataTables-1.9.4.css" rel="stylesheet" type="text/css" />
<link href="datatables/css/dataTables.fixedHeader.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">HR Information</th>
<th colspan="3">Contact</th>
</tr>
<tr>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>Edinburgh</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>$170,750</td>
<td>Tokyo</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>$86,000</td>
<td>San Francisco</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>$433,060</td>
<td>Edinburgh</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>$162,700</td>
<td>Tokyo</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
var datatables_options =
{
"bAutoWidth": true,
"sDom": '<"top"i>rt<"bottom"flp><"clear">', //determine render order for datatables.net items, http://datatables.net/ref#sDom
"bPaginate": false, // paging
"sPaginationType": "full_numbers", // http://datatables.net/release-datatables/examples/basic_init/alt_pagination.html
"iDisplayLength": 10, // page row size
"bSort": true, //sorting
"bFilter": false, // "search" box
"aaSorting": [], // default sort
"bInfo": false, // "Showing x to y of z entries" message
"bStateSave": false, // save state into a cookie
"iCookieDuration": 0, // save state cookie duration
"bScrollAutoCss": true, // datatables.net auto styling of scrolling styles, http://datatables.net/forums/discussion/comment/15072
"bProcessing": true, // "processing" message while sorting .. doesn't appear to be doing anything
"bJQueryUI": false // css classes for jQueryUI themes?
//"asStripeClasses": [], // remove odd/even row css classes (they will be assigned elsewhere)
};
datatables_options["sScrollY"] = "450px";
datatables_options["sScrollX"] = "100%";
datatables_options["bScrollCollapse"] = true;
var $datatable = $(".example").dataTable(datatables_options);
new $.fn.dataTable.FixedColumns($datatable,
{
"iLeftColumns": 1,
//"sLeftWidth": 'relative',
//"iLeftWidth": 20,
"sHeightMatch": "none", /* if there aren't any rows that have wrapping text this would be best because it is much faster in IE8 */
//"sHeightMatch": "semiauto",
//"sHeightMatch": "auto",
});
});
</script>
</body>
<style type="text/css">
th, td {
white-space: nowrap;
padding-left: 40px !important;
padding-right: 40px !important;
}
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</html>
screenshot:
You just have the table width set to 100% and sScrollX set to 100%. You lack to define sScrollXInner :
This property can be used to force a DataTable to use more width than
it might otherwise do when x-scrolling is enabled. (...)
add
datatables_options["sScrollXInner"] = '150%';
or whatever width you want the table to have, to your options object. Your example as above in a demo -> http://jsfiddle.net/PEN7T/