Develop Reference

datatables.net Unable to sort footer selection month name wise

Sorry I am new here and don't know how to ask queries.
I have a salary table. there is a column by which users can see the data of employees in month wise. I have used the example in https://www.datatables.net/examples/api/multi_filter_select.html. But in the footer portion, it is showing the month name in alphabetical order, but I want it in January, February..... December.
I have uploaded the test cases here. Please check
http://live.datatables.net/rowufiru/1/
the output image is
My HTML code is
<table id="example1" class="display table table-bordered">
<thead>
<th>Name</th>
<th data-field="start_date" data-sortable="true" data-footer-formatter="amountFormatter">Month</th>
<th>Year</th>
<th>Total salary</th>
</thead>
<tbody id="employee_data">
<tr>
<td>Akash</td>
<td>December</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>March</td>
<td>2020</td>
<td>600</td>
</tr>
<tr>
<td>Akash</td>
<td>January</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>April</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>May</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Akash</td>
<td>February</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Sumit</td>
<td>January</td>
<td>2020</td>
<td>500</td>
</tr>
<tr>
<td>Akash</td>
<td>October</td>
<td>2020</td>
<td>500</td>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Month</th>
<th>Year</th>
<th>Total salary</th>
<th></th>
</tr>
</tfoot>
</table>

how can i convert or print big html table into pdf using jquery javascript

I have a big table that i want to either print or convert to pdf.
The problem now most of the columns are left for the print.
I don't know why columns are left for the print .
Please refer (below snippet is not working) Jsfiddle: https://jsfiddle.net/85okepx8/12/
Here is demo:
$('#print').click(function(){
$('#examples').printThis();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.12.2/printThis.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Print
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th>Order Number</th>
<th>PO Number</th>
<th>Quantity</th>
<th>Due Date</th>
<th>Billing Address</th>
<th>Shipping Address</th>
<th>Installing Address</th>
<th>Design</th>
<th>Production</th>
<th>Shipping</th>
<th>Install</th>
<th>Production Manager</th>
<th>Project manager</th>
<th>Sales Representatives</th>
<th>Shipping Method</th>
<th>Created At</th>
<th>Status</th>
<td style="display:none;"></td>
</tr>
</thead>
<tbody>
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- second row -->
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- end of second row -->
</tbody>
</table>
The intention of doing this is to have a final copy of my customer related data, to have a good insight into the customer data.
Please help me thanks in advance !!!

Here All coulmns are Showing !
function printContent(el) {
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Print
<div class="container" id="examples">
<table class="table table-dark">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th>Order Number</th>
<th>PO Number</th>
<th>Quantity</th>
<th>Due Date</th>
<th>Billing Address</th>
<th>Shipping Address</th>
<th>Installing Address</th>
<th>Design</th>
<th>Production</th>
<th>Shipping</th>
<th>Install</th>
<th>Production Manager</th>
<th>Project manager</th>
<th>Sales Representatives</th>
<th>Shipping Method</th>
<th>Created At</th>
<th>Status</th>
<td style="display:none;"></td>
</tr>
</thead>
<tbody>
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- second row -->
<tr>
<td>lNsbTEo</td>
<td>eweeedm</td>
<td>fdvjhdhd</td>
<td>1958</td>
<td>445</td>
<td>3</td>
<td>2018/01/27 17:03</td>
<td>fnhbbhf</td>
<td>shipping address by me</td>
<td>installing address</td>
<td>design</td>
<td>production</td>
<td>shipping</td>
<td>install</td>
<td>production manager</td>
<td>project manager</td>
<td>kfgkk</td>
<td>shipping method</td>
<td style="color:#0277bd">16-01-2018</td>
<td class="statusNotClass">
Completed
</td>
<td>
</td>
</tr>
<!-- end of second row -->
</tbody>
</table>
</div>

Applying the jQuery tablesort and re-numbering line item #'s

I need your help.
While I love this jQuery tablesorter plug-in, its only downfall is that my line numbers because out of sorts upon sorting another column. How would one renumber the line item #'s such that they would be in sequence. For example, if I were to click on the [First Name] column, the table becomes sorted as follows in the image below:
As you can clearly see, my numbers on the left are now out of sorts. How could delete and re-number the line item #'s in their proper sequence starting from (lowest to the highest integer).
Here is the markup in question:
$(document).ready(function() {
$("#myTable").tablesorter();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
</script>
<table id="myTable" class="style1" border="1" cellspacing="1">
<thead>
<tr style="border-width: 1px; background-color: #C0C0C0">
<th>#</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>2</td>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>3</td>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>4</td>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

After completing sorting it will fire sortEnd event at that time update the numbering
$(document).ready(function() {
$("#myTable").tablesorter().on("sortEnd", function() {
$(this).find("tr:gt(0)").each(function(i) {
$(this).find("td:eq(0)").text(i+1);
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
</script>
<table id="myTable" class="style1" border="1" cellspacing="1">
<thead>
<tr style="border-width: 1px; background-color: #C0C0C0">
<th>#</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>2</td>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>3</td>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>4</td>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

Use the sortEnd event and add some code to re-number the first column:
$(document).ready(function()
{
$("#myTable").tablesorter().bind("sortEnd",function(e, t){
var table = $(this);
table.find('tbody tr').each(function(i){
var row = $(this);
var firstCell = row.find('td:first-child');
firstCell.text(i+1);
});
});
}
);
Working fiddle: http://jsfiddle.net/gdxjvtkm/

scrolling horizontally with fixed left div

I'm looking for a way to scroll horizontally in a div view, with on the left a sidebar that is fixed. So when there is scrolling (horizontal), everything disappears behind this sidebar.
To illustrate:
I do not know how this can be done precisely. Can this only through CSS or do it in conjunction with Javascript? And if so, how exactly?
Here's [my working fiddle so far]
ssss(http://jsfiddle.net/justamir/fp2xgqL5/)

If you are using a table, to make it scrollable you place it within a div with overflow. If you want a fix column, this must be placed outside the overflowed div. You end up with a layout like this:
.scrollable {
width: 100px;
overflow: auto;
}
.fixed,
.scrollable {
float: left;
}
<table class="fixed">
<tr>
<th>FIXED</th>
</tr>
<tr>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
</tr>
</table>
<div class="scrollable">
<table>
<tr>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
</tr>
<tr>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
</tr>
</table>
</div>

move a column ,including th, between tables in jQueryUI sortable

Fiddle Example
I have two example tables with subject titles in the first cells.
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
<th>Person 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
<td>23</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
<td>Policeman</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Firefighter</td>
</tr>
</tbody>
</table>
I've made the first child of th and td unsortable since they are titles. Is there any way to move other columns, one at a time (td:nth-child,th:nth-child), to the other table using jQueryUI sortable?
How can I make a whole column sortable in the change or start event?
Here's my expected output:
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 2</th> // sorted
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>23</td> //sorted
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Policeman</td> //sorted
<td>Firefighter</td>
</tr>
</tbody>
</table>
JS code:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(function() {
$( ".sort" ).sortable({
change: function( event, ui ) {
var see = ui.item.index();
console.log(see);
$(this).find('td:nth-child(see),th:nth-child(see)')
},
helper: fixHelperModified,
cancel: ".ui-state-disabled",
connectWith: ".connect"
}).disableSelection();
});

What about something like this?
It's a workaround for what you're asking, but it does basically the same thing, just fix the styling, spaces, etc. as you'd like
HTML
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>18</td>
</tr>
<tr>
<td>Clerk</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>Policeman</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
</tr>
<tr>
<td>Student</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>46</td>
</tr>
<tr>
<td>Firefighter</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
td, th {
border:1px solid #222
}
.red {
background:red
}
.ui-state-disabled {
opacity:1
}
.sortableContainer>div {
display:inline-block;
}
table {
border-spacing:0px;
border-collapse:collapse;
}
JS
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});