Develop Reference

asp.net mvc Hide column used for filter

i have a table that i filter using a checkbox based on a column field bool "isAdmin" - when checkbox is checked, i see all orders, when unchecked,
i only see orders with isAdmin = true.
this is working as expected,
but i want isAdmin (first column) to be hidden, but i can't remove it since
i want to use it for the filtering.
View Html:
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<div id="AllOrders">
<input type="checkbox" id="pos" value=true /> Show All Orders
</div>
<thead class="thead-dark">
<tr class="table-info">
<th>Is Admin</th>
<th>Order Id</th>
<th>Order Status</th>
<th>Product</th>
<th>US Date</th>
<th>Store</th>
<th>Quantity</th>
<th>Full Address</th>
<th>Tracking Number</th>
<th></th>
</thead>
#{string FullAddress = "";}
#foreach (Order order in Model.Order)
{
FullAddress = "";
<tr>
<td>#order.IsAdmin</td>
<td>#order.Id</td>
<td>#order.OrderStatus</td>
.
.
.
.
</table>
Javascript that control the checkbox in the section script:
<script>
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var isAdmin = data[0];
if ($('#pos').prop("checked") == true) {
return true;
} else if ($('#pos').prop("checked") == false && isAdmin) {
return true;
}
else { return false; }
}
);
$('input:checkbox').on('change', function () {
var table = $('#tblData').DataTable();
table.draw();
});
</script>

How to get multiple checkbox checked value in jquery datatable

On Button Click, I want to get the multiple row selected value from the datatables. From my below code, I only get the first row selected value.
function AssignVendor() {
var table = $(assignVendor).DataTable();
var data = table
.row({ selected: true })
.data();
}
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0" width="100%" ui-jq="dataTable" ui-options="dataTableOpt">
<thead>
<tr>
<th class="select-checkbox"></th>
<th>MP Name</th>
<th>MP Code</th>
<th>Vendor Name</th>
<th>Vendor Code</th>
<th>From Date</th>
<th>To Date</th>
<th>Remarks</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mp in MaintenanceZones">
<td></td>
<td>{{mp.MP_NAME}}</td>
<td>{{mp.MP_CODE}}</td>
<td>{{mp.REMARK}}</td>
<td>{{mp.VENDORNAME}}</td>
<td>{{mp.VENDORCODE}}</td>
<td>{{mp.VFRDATE}}</td>
<td>{{mp.VTODATE}}</td>
</tr>
</tbody>
</table>
Please help

Try this
$('#assignVender').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
function AssignVendor() {
var table = $(assignVendor).DataTable();
var data = table.rows('.selected').data();
}
Reference: https://datatables.net/examples/api/select_row.html
To Loop through the data use the following:
data = table.rows('.selected').data();
data.each( function ( value, index ) {
console.log( 'Data in index: '+index+' is: '+value );
} );

datatables use select-checkbox to get selected id and post via ajax easier way

How can I use datatables select-checkbox? The code below is for clicking table rows to get selected rows, but i want to do with datatables select checkbox and than post the values by ajax.
Jquery:
$(document).ready(function() {
var selected = [];
$("#example").DataTable({
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-arrays.php",
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
}
});
$('#example tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
} );
html:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id </th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>

How limit jquery data Table field from showing all column in MVC view

I am using jquery DataTable in this link to create a grid in MVC to show some data and show and hide the column.
https://datatables.net/examples/api/show_hide.html
I am showing all the column and then show and hide base on what column user choose. But I like to show just 5 column at beginning in my grid instead of all column and user able to show/ hide the rest.
I am not sure how to do that.
This is my code:
this is jquery code to show/hide the column:
$(document).ready(function () {
var table = $('#DataLegal').DataTable({
"paging": true
});
$('a.toggle-vis').on('click', function (e) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
//Get the column API object
var column = table.column($(this).attr('data-column'));
// Toggle the visibility
column.visible(!column.visible());
});
var ms = $('#magicsuggest').magicSuggest({
// Converts our C# object in a JSON string.
data: #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(columns))
});
$(ms).on('selectionchange', function(e,m){
// Turn on ALL columns... Like a reset...
$.each(table.columns()[0], function(index) {
table.column(index).visible(true);
});
// Turn off each column in the value array... Value = int[0, 1, 2, ...]
$.each(this.getValue(), function(index, item) {
table.column(item).visible(false);
});
});
});
and this is my grid that is showing all the column. I like to limit this at first show only 5 column:
//This is when user sees the column name to show/hide
<div id="content">
<table>
<tr>
<td>
<div id="magicsuggest"></div>
</td>
<td id="returnS5"></td>
</tr>
</table>
</div>
//This is the grid that I have all the column and I like to limit it to 5 column
<br />
<table width="100%" class="display" id="DataLegal" cellspacing="0">
<thead>
<tr>
<th>Entity</th>how hide some column
<th>License Type</th>
<th>State</th>
<th>Location</th>
<th>Data User</th>
<th>Create Date</th>
<th>Modified Date</th>
<th>Modified By</th>
<th>Status</th>
<th>Surrender Effective Date</th>
<th>NMLS</th>
<th>License Name</th>
<th>License Number</th>
<th>Issuance Date</th>
<th>Expiration Date</th>
<th>License Renewal Due Date</th>
<th>License Renewal Fee</th>
<th>License Renewal Filed Date</th>
<th>Annual Report Due Date</th>
<th>Annual Report Filed Date</th>
<th>Other Filed Date</th>
<th>Display</th>
<th>Display Comments</th>
<th>Regulator</th>
<th>Governing Law</th>
<th>Regulator Address</th>
<th>License Restrictions</th>
<th>Additional Notes</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model)
{
<tr>
<td>#item.Entity</td>
<td>#item.License_Type</td>
<td>#item.State</td>
<td>#item.Location</td>
<td>#item.dataUser</td>
<td>#item.Create_Date</td>
<td>#item.Modified_Date</td>
<td>#item.Modified_By</td>
<td>#item.Status</td>
<td>#item.Surrender_Effective_Date</td>
<td>#item.NMLS</td>
<td>#item.License_Name</td>
<td>#item.License_Number</td>
<td>#item.Issuance_Date</td>
<td>#item.Expiration_Date</td>
<td>#item.License_Renewal_Due_Date</td>
<td>#item.License_Renewal_Fee</td>
<td>#item.License_Renewal_Filed_Date</td>
<td>#item.Annual_Report_Due_Date</td>
<td>#item.Annual_Report_Filed_Date</td>
<td>#item.Other_Filed_Date</td>
<td>#item.Display</td>
<td>#item.Display_Comments</td>
<td>#item.Regulator</td>
<td>#item.Governing_Law</td>
<td>#item.Regulator_Address</td>
<td>#item.License_Restrictions</td>
<td>#item.Additional_Notes</td>
</tr>
}
</tbody>
</table>

The initial visibility of columns is an initialization option which can be set in the columnDefs property. Example:
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
}]
Reference:
Hidden Columns

Datatables: how to get sort arrows on top

I’m using DataTables to display data in my UI.
I’ve configured it to show a search box for every column.
But now the sort arrows are not on the top any more.
How it is currently looking:
Image (I do not have enough reputation to post an image sry.)
How can I get them back to the top?
HTML:
<div id="container">
<div id="demo">
<h2>Index</h2>
<table id="example" class="display">
<thead>
<tr>
<th>MovieId</th>
<th>Title</th>
<th>TagLine</th>
<th>AirDate</th>
</tr>
<tr>
<td></td>
<td>Title</td>
<td>TagLine</td>
<td>AirDate</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JS-Code:
$(document).ready(function () {
$('#example thead td').each(function () {
var title = $('#example thead td').eq($(this).index()).text();
if (title == "") {
return;
}
$(this).html('<input type="text" placeholder="SearchText ' + title + '" />');
});
var table = $('#example').DataTable({
"sAjaxSource": "http://localhost:51794/Movie/AjaxHandler",
"bProcessing": true,
"bServerSide": true,
"sDom": 'ltipr',
"aoColumns": [
{
"sName": "MovieId",
"bSortable": false,
"bSearchable": false,
"bVisible": false
},
{ "sName": "Title" },
{ "sName": "TagLine" },
{ "sName": "AirDate" }
]
});
$("#example thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
});

I suggest you to place the filters above header row, and your problem will be solved.
:
<thead>
<tr>
<td></td>
<td>Position</td>
<td>Office</td>
<td>Age</td>
<td>Start date</td>
<td>Salary</td>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

Add the option
"bSortCellsTop": true
to your datatables init code.
http://legacy.datatables.net/usage/options#bSortCellsTop