I am using a jQuery datatable with checkbox column for select checked rows value in button click event. Please see my below image.
I use this code for getting check rows
var checkedRows = dtTable._('tr.checked', { "filter": "applied" });
My problem is when i click the header row check box it's works fine. But it's shows null
in single row check box click. I am clueless.
Edit
firebug
JQuery
var dtTable = null;
var ajaxUrl = "";
$(document).ready(function () {
GetCustomerAcceptence();
$("#btnReceived").click(function () {
var checkedRows = dtTable._('tr.checked', { "filter": "applied" });
if (checkedRows == null) {
alert("checkedRows is null.");
}
else {
alert("checkedRows is not null. Value : " + checkedRows[0][1]);
}
});
function GetCustomerAcceptence() {
/* Clear datatable before reload. */
ClearDataTable();
var elementName = "";
ajaxUrl = "";
elementName = "#tblCustomerAcceptence";
ajaxUrl = '#Url.Action("GetCustomerAcceptenceOrders", "Dispatch")';
dtTable = $(elementName).dataTable({
bProcessing: false,
bLengthChange: false,
bInfo: false,
bFilter: false,
bPaginate: false,
sAjaxSource: ajaxUrl,
aoColumns: [
{
"sClass": "checkbox-column",
bSortable: false,
"mRender": function (data, type, full) {
return '<input type="checkbox" onclick="check(this)" class="icheck-input">';
}
},
{ sTitle: "Id", bSortable: false, bVisible: false },
{ sTitle: "Number", bSortable: false, },
{ sTitle: "Description", bFilterable: true, bSortable: false, },
{ sTitle: "PoBox Number", bSortable: false, },
{ sTitle: "Owner", bSortable: false, },
{ sTitle: "Physical Weight", bSortable: false, },
{ sTitle: "Vol.Weight", bSortable: false, },
{ sTitle: "Last Status", bSortable: false, },
{ sTitle: "Zone", bSortable: false, },
],
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "MasterAWB", "value": "0" },
{ "name": "PoboxNumber", "value": "0" },
{ "name": "TypeofGoods", "value": 0 },
{ "name": "Provider", "value": 0 },
{ "name": "DateFrom", "value": "0" },
{ "name": "DateTo", "value": "0" },
{ "name": "Zone", "value": 0 },
{ "name": "BagNumber", "value": "0" }
);
},
});
}
function ClearDataTable() {
if (dtTable != null) {
dtTable.dataTable().fnClearTable();
dtTable.dataTable().fnDestroy();
}
}
});
I am really sorry to say that there is a mistake in check box column. I need to place check function in my webpage to fire the check box checked event.
/* checkbox in table */
function check(e) {
if ($(e).parent('td').parent('tr').hasClass('checked')) {
$(e).parent('td').parent('tr').parent('tbody').parent('table').children('thead').find('th:first').children('div').removeClass('checked');
$(e).parent('td').parent('tr').removeClass('checked');
}
else {
$(e).parent('td').parent('tr').addClass('checked');
dtTable.fnDraw();
}
}
/* end */
Related
I trying to insert json collection in datatable using jQuery.
This is my code:
function reloadseekers(vacancy){
if (vacancy) {
$.ajax({
url: '/getseekers/' + vacancy,
method: "GET",
dataType: "json",
cache: false,
success: function (data) {
$.each(data.appseekers, function (index) {
$('#evaluated_list_table').dataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"data": data.appseekers,
"columns": [
{ "title": "SSN" },
{ "data": data.appseekers[index].ssn},
{ "title": "Full Name" },
{ "data": data.appseekers[index].first_name + ' '+data.appseekers[index].second_name +' '+data.appseekers[index].middle_name+' '+data.appseekers[index].last_name },
{ "title": "Primary phone" },
{ "data": data.appseekers[index].phone_1},
{ "title": "Secondary phone " },
{ "data": data.appseekers[index].phone_2},
{ "title": "Secondary phone " },
{ "data": data.appseekers[index].evaluation.total_evaluation},
]
});
});
}
}
}
The table empty and without any data,,, the json data is already gotten from the server:
The json data from the server
what is wrong in this code? help please
i have select dropdown which picks no. of pages to be shown as jquery pagination. everything is fine but when it comes to ie. select dropdown collapses.see image.
i also refered link
but it seems it will not work for me.I am doubtful that is it ie default behaviour and can't do much....
<script type="text/javascript">
$(document).ready(function() {
var url="${pageContext.request.contextPath}/aaa/aaa/aaa";
url+="?fromDate=${fromDate}";
url+="&toDate=${toDate}";
url+="&callType=${callType}";
url+="&fullListSize=0";
var table = $('#call_history_detail').DataTable({
"preDrawCallback": function( settings ) {
$("#searchTable").val("");
$('body').modalProgress("show");
},
"drawCallback": function( settings ) {
wordWrap("userName", 80, 2);
$('body').modalProgress("hide");
},
"processing": true,
"serverSide": true,
"searching": false,
//"ajax": url,
"ajax": {
"contentType": "application/json",
"url": url,
"data": function ( d ) {
var drawValue = d.draw;
var length = d.length;
var start = d.start;
var sortCol = d.order[0].column;
var sortType = d.order[0].dir;
return "draw=" + drawValue + "&length=" + length + "&start=" + start + "&sortCol=" + sortCol + "&sortType=" + sortType;
}
},
"oLanguage": {
"sLengthMenu": "Show _MENU_ entries. <img src='${pageContext.request.contextPath}/img/ico_info.png' class='tt'" +
"title='The search function will only search the page you are currently viewing. To do a more expansive search, increase the entries per page. Increasing the entries per page can increase load time.' />"
},
"lengthMenu": [ [25, 50, 100, 500, 1000, 5000], [25, 50, 100, 500, 1000, 5000] ],
"columns": [
{ "name": "userName" },
{ "name": "callType"},
{ "name": "date" },
{ "name": "time" },
{ "name": "from" },
{ "name": "to" },
{ "name": "cost", "width": "10%" },
{ "name": "duration", "width": "10%" }
],
"columnDefs": [
{
"class": "userName",
"data": "userName",
"defaultContent": "",
"targets": 0
},
{
"class": "callType",
"data": "callType",
"defaultContent": "",
"targets": 1
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getShortDate(data);
},
"defaultContent": "",
"targets": 2
},
{
"class": "date-time",
"data": "timeStart",
"render": function (data) {
return getTimeString(data);
},
"defaultContent": "",
"targets": 3
},
{
"class": 'number',
"data": "origNumber",
"defaultContent": "",
"orderable": true,
"targets": 4
},
{
"class": 'number',
"data": "destNumber",
"defaultContent": "",
"orderable": true,
"targets": 5
},
{
"class": 'cost',
"data": "totalAmount",
"render": function (data) {
return "$"+data.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
},
"defaultContent": "",
"targets": 6
},
{
"class": 'duration',
"data": "callDuration",
"defaultContent": "00:00:00",
"orderable": false,
"targets": 7
}
],
"order": [[ 2, "desc" ]]
});
$('#backToSummary').click(function(e){
e.preventDefault();
$('form#call-history-options').submit();
});
});</script>
Add this to the css div z-index: value;
Hi i 'm trying to hide all nodes in jstree when the search has no results but I am getting the following error.
Uncaught TypeError: $(...).jstree(...).hide_all is not a function
Here is the code I use:
$("#divtreeComponentes").jstree("destroy");
$("#divtreeComponentes").jstree({
"core": {
// so that create works
"check_callback": true,
"data": data2
},
"checkbox": {
"keep_selected_style": false
},
"search": {
"show_only_matches": true,//filtering
"show_only_matches_children": true
},
"types": {
"types": {
"disabled": {
"check_node": false,
"uncheck_node": false
}
}
},
"plugins": ["checkbox", "search", "sort"]
}).on('search.jstree', function (nodes, str, res) {
if (str.nodes.length===0) {
$('#divtreeComponentes').jstree(true).hide_all();
}
})
$('#Filtrar_Usuarios').keyup(function(){
$('#divtreeComponentes').jstree(true).show_all();
$('#divtreeComponentes').jstree('search', $(this).val());
});
are any ideas that may be happening ?
thanks for helping!
I solved the problem with this.
$("#divtreeComponentes").jstree({
"core": {
// so that create works
"check_callback": true,
"data": data2
},
"checkbox": {
"keep_selected_style": false
},
"search": {
"show_only_matches": true, //filtering
"show_only_matches_children": true
},
"types": {
"types": {
"disabled": {
"check_node": false,
"uncheck_node": false
}
}
},
"plugins": ["checkbox", "search", "sort"]
}).on('search.jstree', function(nodes, str, res) {
if (str.nodes.length === 0) {
$('#divtreeComponentes').hide();
}
})
$('#Filtrar_Usuarios').keyup(function() {
$('#divtreeComponentes').show();
$('#divtreeComponentes').jstree('search', $(this).val());
});
$('#divtreeComponentes').hide(); Works for me!
Good luck!
I'm trying to use the Masked Input plugin on one of my dataTables Editor fields (#DTE_Field_phone). For some reason, the mask isn't being applied with this code:
$('#DTE_Field_phone').mask('(999) 999-9999');
I'm calling the mask after the table and editor are initialized, yet still nothing. Any ideas on what I may be doing wrong?
HTML:
<div class="DTE_Field_Input" data-dte-e="input">
<input id="DTE_Field_phone"></input>
<div class="DTE_Field_Error" data-dte-e="msg-error" style="display: none;"></div>
<div class="DTE_Field_Message" data-dte-e="msg-message"></div>
<div class="DTE_Field_Info" data-dte-e="msg-info"></div>
</div>
jQuery:
jQuery(function ($) {
$( document ).ready(function (e) {
var editor = new $.fn.dataTable.Editor({
"ajaxUrl": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
"domTable": "#form_results7",
"fields": [
{ "label": "Contact",
"name": "contact",
"type": "text" },
{ "label": "Company",
"name": "company",
"type": "text" },
{ "label": "Email",
"name": "email",
"type": "text" },
{ "label": "Phone",
"name": "phone",
"type": "text" },
{ "label": "Fax",
"name": "fax",
"type": "text" },
{ "label": "Address",
"name": "address",
"type": "text" },
{ "label": "Tax ID",
"name": "tax_id",
"type": "text" }
]
});
$('#add_items').on('click', function (e) {
e.preventDefault();
editor.create(
'Add Contact',
{
"label": "Add",
"fn": function () {
editor.submit()
}
}
);
});
$('#form_results7').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Edit Contact',
{ "label": "Update", "fn": function () { editor.submit() } }
);
});
$('#form_results7').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.message( "Are you sure you want to remove this row?" );
editor.remove( $(this).parents('tr')[0], 'Delete row', {
"label": "Confirm",
"fn": function () { this.submit(); }
});
});
var oTable = $('#form_results7').dataTable({
"bAutoWidth": false,
"bJQueryUI": true,
"sAjaxSource": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
"sDom": "<'H'lfr>t<'F'ip>",
"aoColumns": [
{ "mData": "contact",
"sWidth": "14%" },
{ "mData": "company",
"sWidth": "14%" },
{ "mData": "email",
"sWidth": "17%" },
{ "mData": "phone",
"sWidth": "11%" },
{ "mData": "fax",
"sWidth": "11%" },
{ "mData": "address",
"sWidth": "17%" },
{ "mData": "tax_id",
"sWidth": "8%" },
{ "bSortable": false,
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit | Delete',
"sWidth": "8%" }
],
"sPaginationType": "full_numbers"
});
$('#DTE_Field_phone').mask("(999) 999-9999");
try {$("#form_results7_length select").msDropDown();} catch(e) {alert(e.message);}
$('#refresh_items').click(function() {
location.reload();
});
$("#reset").click(function() {
$("#form_results7_filter input").val("");
oTable.fnFilter("");
oTable.fnSort([[ 0, "asc" ]]);
});
});
});
I have no experience of dataTables but from your code I think you are using the popup editor?
If so you probably need to apply the mask in the event which is fired after the editor is opened like this:
editor.on('onOpen', function () {
$('#DTE_Field_phone').mask('(999) 999-9999');
});
You're declaring a $( document ).ready(function (e) { function inside a Jquery(function($), which is wrong...
jQuery(function ($) {
$( document ).ready(function (e) {
...
}
}
You can't use these 2 functions together, since they hook to the same event.
See here in the documentation.
Solution 1
jQuery(function ($) {
...
}
Solution 2
$( document ).ready(function (e) {
...
}
The autocomplete is working fine, but it's displaying the auto suggestion box with 1 character, and I would like to change it to display the auto suggestion box only when the input is >=3.
I've been trying to insert 'minLength' option but it is not taking any effetct.
I've tried to modify the sixth line to:
.autocomplete(conf.opts, minLength: 3 || {});
But had no success.
Here's my JS file:
var myEditor;
// AutoComplete FieldType
$.fn.dataTable.Editor.fieldTypes.autoComplete = $.extend(true, {}, $.fn.dataTable.Editor.models.fieldType, {
"create": function (conf) {
conf._input = $('<input type="text" id="' + conf.id + '">')
.autocomplete(conf.opts || {});
return conf._input[0];
},
"get": function (conf) {
return conf._input.val();
},
"set": function (conf, val) {
conf._input.val(val);
},
"enable": function (conf) {
conf._input.autocomplete('enable');
},
"disable": function (conf) {
conf._input.autocomplete('disable');
},
// Non-standard Editor method - custom to this plug-in
"node": function (conf) {
return conf._input;
}
});
$(document).ready(function () {
myEditor = new $.fn.dataTable.Editor({
"ajaxUrl": "./php/pTreinamentos.php",
"domTable": "#example",
"fields": [{
"label": "Tema",
"name": "tema",
"type": "autoComplete",
"opts": {
"source": ['banana']
}
}
]
});
// DataTable
var oTable = $('#example').dataTable({
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sAjaxSource": "./php/pTreinamentos.php",
"bFilter": true,
"bAutoWidth": false,
"iDisplayLength": 20,
"aoColumns": [{
"mData": "tema"
}
],
"oTableTools": {
"sSwfPath": "../../TableTools/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"sPaginationType": "bootstrap",
"aButtons": [{
"sExtends": "editor_create",
"editor": myEditor
}, {
"sExtends": "editor_edit",
"editor": myEditor
}, {
"sExtends": "editor_remove",
"editor": myEditor
}
]
}
});
});
The solution was to add the option inside the field structure.
"fields": [{
"label": "Data",
"name": "data",
"type": "autoComplete",
"opts": {
"source": ['banana'],
"minLength": 3
}