I have a DataTable in my .NET Core application which has a checkbox column. I would like to be able to sort/order the table by checkbox value using the arrow buttons in the table header. In order to achieve this I have used the code from the DataTables Live DOM Ordering example here: https://datatables.net/examples/plug-ins/dom_sort.html
However, the column re-ordering does not work. If I inspect the elements I can see that there is something happening to the elements as they flash, however the order of the rows is not changing.
Here is the HTML:
<table id="airportsTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>IsoCode</th>
<th>Name</th>
<th>TimezoneName</th>
<th>TimezoneStandardName</th>
<th>
Required
<input type="checkbox" id="selectAllCheckbox" value="false" />
</th>
</tr>
</thead>
<tbody>
#{ foreach (var airport in airportList) //Index , update after iteration, so that non-model data can be attached
{
string iso = airportList[tableIndex].IsoCode;
<tr>
<td>
<label id="isoCode">#airportList[tableIndex].IsoCode</label>
</td>
<td>
<label id="name">#airportList[tableIndex].Name</label>
</td>
<td>
<label id="timeZoneName">#airportList[tableIndex].TimeZoneName</label>
</td>
<td>
<label id ="timeZoneStandardName">#airportList[tableIndex].TimeZoneStandardName</label>
</td>
<td>
<input type="checkbox" asp-for="#airportList[tableIndex].Required" id="requiredCheckbox" onclick="requiredChanged(this, '#airportList[tableIndex].IsoCode' )" />
</td>
</tr>
tableIndex++;
}
}
</tbody>
</table>
And here is the JQuery:
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).prop('checked') ? '1' : '0';
} );
}
$(document).ready(function () {
var airportsTable = $('#airportsTable').DataTable({
"pageLength": 50,
"columns": [
null,
null,
null,
null,
{ "orderDataType": "dom-checkbox" }
]
});
Any help would be greatly appreciated, TIA!
Add this to your table after your columns section:
"columnDefs": [
{ "orderDataType": "dom-checkbox", targets: 5 }
]
https://datatables.net/reference/option/columns.orderDataType
Related
I use list.js to make a simple sorting of my table's data. Sorting functionality works fine but I want to modify it's initial behaviour. When an user sees the table for the first time he/she should have records with some certain value in one column (with my local currency in this example) put to the top. Just initially, later sorting should work in a standard way.
Let's see the code:
<table id="accountsList">
<thead>
<tr>
<th scope="col" class="sort" data-sort="currency-td" aria-role="button"><span>Currency</span></th>
<th scope="col" class="sort" data-sort="accountNo-td" aria-role="button"><span>Account number</span></th>
<th scope="col" class="sort td-centered" data-sort="used-td" aria-role="button"><span>Used</span></th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="currency-td">EUR</td>
<td class="accountNo-td">53106010151036926643566665</td>
<td class="used-td td-centered">
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td class="currency-td">PLN</td>
<td class="accountNo-td">83106010151036926643522665</td>
<td class="used-td td-centered">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="currency-td">PLN</td>
<td class="accountNo-td">59996010151036926643566665</td>
<td class="used-td td-centered">
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td class="currency-td">USD</td>
<td class="accountNo-td">33106010151036999643566675</td>
<td class="used-td td-centered">
<input type="checkbox">
</td>
</tr>
</tbody>
<script type="application/javascript">
$(document).ready(function(){
var options = {
valueNames: ['currency-td', 'accountNo-td', 'used-td']
};
var accountsList = new List('accountsList', options);
accountsList.sort("currency-td", {
order: "desc"
});
});
</script>
The only thing I'd like to do is to put all the records with the 'PLN' currency at the top at the beginning. Why I don't just order them the way I want in HTML the way I want and later enable sorting, without initial sorting? Because in fact, these records are generated by PHP (I simplified the code above, just showing an example of generated HTML) and I can't predict what data I will get.
I need to write a sorting function in this place:
accountsList.sort("currency-td", {
order: "desc",
sortFunction: function () {}
});
Do you have any ideas? :)
try using alphabet feature of List.js, smthg like :
var options = {
valueNames: ['currency-td', 'accountNo-td', 'used-td']
};
var accountsList = new List('accountsList', options);
accountsList.sort("currency-td", { alphabet: "PLNABCDEFGHIJKMOQRSTUVXYZplnabcdefghijkmoqrstuvxyz" }
);
This is documented here http://listjs.com/api/#sort
I figured it out this way:
accountsList.sort('currencyTd', {
order: 'asc',
sortFunction: function (a, b) {
if ((a.currencyTd === 'PLN') != (b.currencyTd === 'PLN')) {
return a.currencyTd === 'PLN' ? 1 : -1;
}
return a.currencyTd > b.currencyTd ? 1 :
a.currencyTd < b.currencyTd ? -1 : 0;
}
});
The solution suggested in:
https://stackoverflow.com/a/17254561/5420497
I am using: jquery.dataTables.js from: https://datatables.net
I amtrying to add a new row in my json table.
I could not get it work any ideas why not?
jsfiddle: http://jsfiddle.net/f7debwj2/17/
html:
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>order</th>
<th>name</th>
<th>country</th>
</tr>
</thead>
</table>
<button id="addRow">Add New Row</button>
<table id="newRow">
<tbody>
<tr>
<td>Line 2
<input type="hidden" value="2" /> </td>
<td>DVap
<input type="hidden" value="DVap" /> </td>
<td>
<input type="text" value="22" /> </td>
</tr>
</tbody>
</table>
jquery:
$(document).ready(function() {
var dt = $('#example').dataTable();
dt.fnDestroy();
});
$(document).ready(function() {
var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
var table = $('#example').DataTable({
ajax: url,
rowReorder: {
dataSrc: 'order',
},
columns: [{
data: 'order'
}, {
data: 'name'
}, {
data: 'place'
}]
});
// add row
$('#addRow').click(function() {
//t.row.add( [1,2,3] ).draw();
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
dt.row.add($(rowHtml)).draw();
});
});
Like you can see in the documentation you need to change this line:
dt.row.add($(rowHtml)).draw();
to:
table.row.add($(rowHtml)).draw();
The updated fiddle.
Your actual error was
Uncaught ReferenceError: dt is not defined
Just change table.row.add($(rowHtml)).draw() instead of dt.row.add($(rowHtml)).draw() inside button click event.
I am writing my first non-tutorial angular.js web app. I am using two smart-tables and checklist-model. Here is the first one that uses a st-safe-src of all_types that is an array of json objects that look like this ...
[
{
"_id": "56417a9603aba26400fcdb6a",
"type": "Beer",
"__v": 0
},
{
"_id": "56456140cb5c3e8f004f4c49",
"type": "Skiing",
"__v": 0
},
...
Here is the html for the table I use to display this data:
<table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped">
<thead>
<tr>
<th st-sort="type">Types</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in displayedCollection">
<td><input type="checkbox" checklist-model="vendor.types" checklist-value="x.type">{{x.type}}</td>
</tr>
<tr><td>id ({{curid}}) {{vendor.types}}</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
This table looks like this when I load data into it. The checkboxes get checked to match the data from my model.
But when I try to do the same thing in a second smart table with more complete json objects that look like this ...
[
{
"_id": "569f047dd90a7874025b344e",
"product_title": "Plugs",
"product_img_001": "p001.jpg",
"product_img_002": "p002.jpg",
"product_vid_001": "bp.mov",
"__v": 0,
"product_sizes": [
"Large",
"Med.",
"Small",
"10.5"
],
"product_types": [
"Running Shoe"
]
},
{
"_id": "569f3958b108a7d70201b89a",
"product_title": "Back Scratcher",
"product_img_001": "http://itchy.png",
"product_img_002": "http://relief-at-last.png",
"product_vid_001": "my-itch",
"__v": 0,
"product_sizes": [
"Large"
],
"product_types": [
"Rocks"
]
}
]
Here's the html I am using to display this data in a smart table:
<table st-table="prodCollection" st-safe-src="all_products" class="table table-striped">
<thead>
<tr>
<th st-sort="type">Products</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in prodCollection">
<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x">{{x.product_title}}</td>
</tr>
<tr><td>{{vendor.products}}</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
This table looks like this when I load data into it:
I had hoped that the checkbox would be checked, but they do not get checked.
If make this change ...
<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x.product_title">{{x.product_title}}</td>
... the correct checkboxes get checked but just the product's title will be posted. What do I need to do to get the checkboxs to display checked and be able to post the whole product data?
I have added a plunker example: http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l
You can use as checklist-value the id instead of the Object as say section on doc Array of objects (pick id)
<input type="checkbox" checklist-model="vendor.products" checklist-value="x._id">
Or if you need use the Object as selected products (checklist-value="x") you need use checklist-comparator because in your plunker the selected array and full product list don't have the same references. The comparator must match the equal objects by _id. Try this
<input type="checkbox" checklist-comparator="._id" checklist-model="vendor.products" checklist-value="prod" />
There is an option called ng-true-value="1". This will check with the values of the ng-model. It will work like if(ng-model(Name) == 1). Try this out.
<input type="checkbox" name="checkbox_demo_4" id="checkbox_demo_4"
ng-model="temp.taxable_type"
ng-true-value="1"
/>
In this, 1 is the true value that I stored in the DB. So it is checking automatically if the ng-model value contains 1.
All the best.
After reading carefully your question, and supossing that you want the same behaviour as the first smart table, the problem I think you had can be solved by
setting the product_title as the checklist-value of the input field, something like this :
<input type="checkbox" checklist-model="vendor.products" checklist-value="prod.product_title" />
Here the plunkr associated
http://plnkr.co/edit/5an1Fx?p=preview
I have table which consists of multiple rows and each row consists of Radio button in the first column as follows:
<table class="table table-condensed span8" id="AllocationTable">
<thead>
<tr>
<th title="Entity to Allocate" style="width: 30%">Entity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.EntityAllocations)
{
<tr>
<td>
<input type="radio" name="radio" id="#item.ID" class="EntityRadioSelect" value="#item.ID" onclick="EntitySelect(this)" disabled="disabled" >
</td>
</tr>
}
</tbody>
</table>
Now I want to capture the Ids of the last clicked radio button
I have tried something like this
function EntitySelect(select) {
if ($(select).parent().data("lastClicked")){
alert($(select).parent().data("lastClicked"));
}
$(select).parent().data("lastClicked", select.id);
}
But I am getting the wrong value as it is giving me current value and sometime other values which is not accepted answer.
var clicked='';
var preClicked='';
$("#AllocationTable").on("click",".EntityRadioSelect",function(){
preClicked=clicked;
clicked=$(this).attr("id");
});
remove onclick="EntitySelect(this)"
try this:
function EntitySelect(select) {
var parent=$(select).parents('#AllocationTable');
if (parent.data("lastClicked")){
alert(parent.data("lastClicked"));
}
parent.data("lastClicked", select.id);
}
I am totally newbie for JQuery but I need someone help for this part.
I m dealing with a dynamic table from a template. I wish to remove the 10 records per page section but I have no idea how to do so. Anyone please?
Here is the HTML code which I still understandable
<table class="table table-striped border-top" id="sample_1">
<thead>
<tr>
<!-- <th style="width:8px;"><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th> -->
<th>No</th>
<th>Name</th>
<th class="hidden-phone">Name</th>
<th class="hidden-phone">Text</th>
<th class="hidden-phone">Text</th>
<th class="hidden-phone">Text</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
<td>1</td>
<td>Jhone doe</td>
<td class="hidden-phone">jhone-doe#gmail.com</td>
<td class="hidden-phone">10</td>
<td class="center hidden-phone">02.03.2013</td>
<td class="hidden-phone"><span class="label label-success">Approved</span></td>
</tr>
<tr class="odd gradeX">
<!-- <td><input type="checkbox" class="checkboxes" value="1" /></td> -->
<td>2</td>
<td>dipsdf</td>
<td class="hidden-phone">lorem-ip#gmail.com</td>
<td class="hidden-phone">33</td>
<td class="center hidden-phone">05.04.2013</td>
<td class="hidden-phone"><span class="label label-success">Approved</span></td>
</tr>
</tbody>
</table>
Jquery part which I have no idea what it doing there
var Script = function () {
// begin first table
$('#sample_1').dataTable({
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}]
});
jQuery('#sample_1 .group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
} else {
$(this).attr("checked", false);
}
});
jQuery.uniform.update(set);
});
jQuery('#sample_1_wrapper .dataTables_filter input').addClass("form-control"); // modify table search input
jQuery('#sample_1_wrapper .dataTables_length select').addClass("form-control"); // modify table per page dropdown}();
I am trying to link the table with display data from database while replacing the 10 records per page section with an add button there. Anyone please.
Appreciate.
If you're just trying to list all the records at once (plus hide the option to change number show per page) you have to disable pagination.
Add the following option to your datatables call.
"bPaginate": false
Read more about Datatable options here.
EDIT
If you still want to paginate but just hide the "per page" option, use the following option instead.
"bLengthChange": false
JSFiddle