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;
Related
In the Table I got 2 columns that I want the same link with attached ID from the item. The frist one from the ID it selft works, But I what to attach the ID to the link of the name it self.
Below is my code to initialize the datatable.
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.txt",
"processing": true,
"columns": [
{ "data": "id", "name": "id",
"render": function (data, type, JsonResultRow, meta) {
return ' '+data+' ';
}
},
{ "data": "dob", "name": "dob",
"render": function (data, type, JsonResultRow, meta) {
return '<img src="/img/userpics/'+data+'">';
}
},
{ "data": "name", "name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = THIS_IS_WHAT_I_CANT_DO ;
return ' '+data+' ';
}
},
{ "data": "position", "name": "position" },
{ "data": "status", "name": "status" }
],
responsive: true,
'iDisplayLength': 6,
"order": [[ 0, "asc" ]],
"lengthMenu": [[50, 100, 500, 1000, -1], [50, 100, 500, 1000, "All"]],
"pageLength": 50
} );
} );
</script>
I think you can get all the data from the row inside the JsonResultRow. You can try console.log(JsonResultRow) to view all the data for the row.
{ "data": "name",
"name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = JsonResultRow['id'];
return ' '+data+' ';
}
},
I'm using the datatables plugin and it's working fine for me. However, I'm making multiple calls to populate multiple tables, when I know I could make one AJAX call and store the results in a variable and have each table function use that variable for its data, but I can't get it to work.
I'm using something like to to get the data I need.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
}
})
The idea is to pass all_data variable into my table function (I have several on this one page) without having to make multiple calls. Doing the following returns one column with the letter "a", which isn't right. The data that comes back is JSON coded. I've used the below code, but with the AJAX function as part of the table function:
$("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
What am I doing wrong here? I'm suspecting I have to prepare all_data somehow, but I'm not sure what that might be.
EDIT: If I console.log the data returned, this is what I get (cut off for brevity):
Object {draw: 0, recordsTotal: 484, recordsFiltered: 484, data: Array[484]}
data: Array[484]
[0 … 99]
0: Array[5]
0: "edu"1: "High School"2: "37.90"3: "49.70"4: "76"length: 5
Your code looks fine, the only thing you need to do is
Assign your datatable to a variable and then in your ajax resolve clear, add data and draw the table.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
table.clear().row.add(all_data).draw(); //clear, add data and draw
}
});
// Assign your datatable to a variable
var table = $("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
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 */
Results that i got from json to display in table by server side is as:
[iTotalDisplayRecords:1, iTotalRecords:1, aaData:[[Mobile Number:98376437, Telephone Number:232323, ], sEcho:1]
and function to load data into table is:
studentListTable = $("#serverSideTableStdList").dataTable({
"bDeferRender": true,
"bProcessing": true,
sAjaxSource:'<g:createLink url="[action:'loadTableDataForServerSide',controller:'student']" />',
"aoColumns":[
{"mData": "TelephoneNumber", "bVisible": true},
{"mData": "MobileNumber", "bVisible": true}
] ,
"oLanguage": {
"sEmptyTable": "",
"sSearch": "Search all columns:",
"sProcessing": "test"
},
bServerSide: true,
sServerMethod: "POST",
"aLengthMenu": [
[10, 50, 1000, 5000, -1],
[10, 50, 1000, 5000, 10000]
],
"iDisplayLength":10,
"fnServerData":function(sSource, aoData, fnCallback){
aoData.push( { "name": "unit", "value": unit } );
aoData.push( { "name": "shift", "value": shift } );
aoData.push( { "name": "batch", "value": batch } );
aoData.push( { "name": "stdName", "value": name } );
$.ajax( {
"dataType": 'json',
"url": sSource,
"data": aoData
} );
},
"fnDrawCallback": function(){
alert(111)
}
but the table body is not loaded and alert is not seen done in fnDrawCallback function please help
Its done now i have missed "success":fncallback in ajax function
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
}