I create a boostrap table with textboxt datepicker.
This textboxt datepicker showing in page 1,
but I have a problem, when a next pagination boostrap table.
This textboxt datepicker not showing, and when I'm back to page 1
datepicker not showing. How can I fix this problem?
On page 1
On page 2
This is my code.
index.jsp
<div class="row">
<table data-filter-control="true" data-sortable="true" data-url="data.jsp" class="table table-bordered table-striped table-condensed" data-toggle="table" data-search="true" data-pagination="true" id="table"></table>
</div>
function operateFormater(value, row, index)
{
return ["<input type='text' id='tgl_setor_"+row.id+"' readonly style='background-color:white' onchange='save_data_tgl("+row.id+","+row.no_form_send+")' class='form-control datepicker' />"];
}
var $table = $('#table');
function initTable(){
$table.bootstrapTable({
columns: [
[
{
field : "no_form",
title : "No Formulir",
width : '3%',
sortable : true,
align:'center'
},
{
field : "tgl_setor",
title : "Tanggal Setor",
width : '3%',
sortable : true,
formatter: operateFormater
}
]
]
});
}
$table.on('load-success.bs.table', function (d)
{
$('.datepicker').DatePicker({
orientation: "top",
autoclose: true,
todayHighlight: true,
format: 'yyyy-mm-dd'
});
});
initTable();
data.jsp
<%# include file="connect.jsp" %>
[
<%
Integer ix = 0;
Rs =st.executeQuery("select * from MsFormulir");
while(Rs.next())
{
ix++;
%>
{
"ix" : "<%=ix %>",
"no_form": "<%=Rs.getString("NoFormulir")==null?"":Rs.getString("NoFormulir").trim() %><input type=\"hidden\" value=\"<%=Rs.getString("NoFormulir")==null?"":Rs.getString("NoFormulir") %>\" name=\"my_form\" id=\"my_form_<%=ix %>\">",
"tgl_setor": "<%=Rs.getString("TglSetor")==null?"":Rs.getString("TglSetor").trim() %>"
}
<%
if(Rs.isLast()==false)
{
%>
,
<% } %>
<% } %>
]
This because of the Bootstrap Table re-render your table every time you change the page. So on every page, the datepicker inputs are all replaced.
You should init the datepicker in page-change.bs.table event callback.
$table.on('page-change.bs.table', function (d)
{
$('.datepicker').DatePicker({
orientation: "top",
autoclose: true,
todayHighlight: true,
format: 'yyyy-mm-dd'
});
});
Related
I have a DataTable with 6 columns where the content of 6th column is sometimes so large that the width of table goes outside the screen.
Is there any way to not make the table width extend the screen width and also preserve the contents of the columns?
An example image is here:
HTML CODE
<div id="tables">
<div id="Running" class="tabcontent">
<table id="running" class="table table-striped table-hover dt-responsive display nowrap" width="100%">
</table>
</div>
</div>
JS CODE
$.getJSON("realtime/2010/jsonoutput.json", function(data) {
$.each(data, function(key, value) {
job_data = [key, value["Jobname"], value["Username"], value["Queue"], value["Elapsed_Time"], value["RequiredTime"], value["Exec_host"].join(',')];
if (value["State"] == "R") {
running_data.push(job_data);
} else if (value["State"] == "Q")
queue_data.push(job_data);
else
hold_data.push(job_data);
});
$('#running').DataTable({
destroy: true,
responsive: false,
data: running_data,
stateSave: true,
columnsDefs: [{
visible: false,
targets: [1]
}],
columns: [
{ title: "Job ID" },
{ title: "Job Name" },
{ title: "User" },
{ title: "Queue" },
{ title: "Elapsed_Time" },
{ title: "Required_Time" },
{ title: "Exec_host" }
],
});
Javascript Date filter to DataTable using single textbox with calendar selection.
Below is my datatable and script code.
<table id="datatable" class="table table-bordered table-striped dataTable" style="width: 100%">
<thead>
<tr>
<th style="width: 300px;">SDMSID</th>
<th style="width: 300px;">Asessor</th>
<th style="width: 300px;">Sector</th>
<th style="width: 300px;">Job Role</th>
<th style="width: 300px;">State</th>
<th style="width: 300px;">City</th>
<th style="width: 300px;">Assessment Date</th>
<th style="width: 300px;">Batch Status</th>
<th>Edit Assessor</th>
<th>Add Candidates</th>
<th>Manage Batch</th>
</tr>
</thead>
</table>
I used below script to fill data-table
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function loadgrid() {
$.ajax({
url: 'Getdropdowns.asmx/filreschedulebatchgrid',
method: 'post',
dataType: 'json',
success: function (data) {
$("#datatable").dataTable().fnDestroy()
$('#datatable').dataTable({
responsive: true,
paging: false,
sort: true,
searching: true,
processing: true,
destroy: true,
data: data,
aaSorting: [],
columns: [
{ 'data': 'SDMSId' },
{ 'data': 'UserName' },
{ 'data': 'SectorFullName' },
{ 'data': 'JobRoleFullName' },
{ 'data': 'State' },
{ 'data': 'City' },
{
'data': 'AssessmentStartDate',
'render': function (Assessment_Date) {
var date = new Date(Assessment_Date);
var month = date.getMonth() + 1;
return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
},
{ 'data': 'DisplayName' },
{
'data': 'BatchId',
'sortable': false,
'searchable': false,
'render': function (BatchId) {
return '</i>';
}
},
{
'data': 'BatchId',
'sortable': false,
'searchable': false,
'render': function (BatchId) {
return '</i>';
//'<input id=' + BatchId + ' type="button" onserverclick="foo_OnClick" />';
}
},
{
'data': 'BatchId',
'sortable': false,
'searchable': false,
'render': function (BatchId) {
return '</i>';
}
}
]
});
}
});
};
});
I tried below example not working and i need some easy way to achieve this filter.
http://plnkr.co/edit/8z7cojpJoCSJXRn9prNj?p=preview
Please suggest how to achieve single data filter with calendar thank you in advance.
Based on the example you provided, to achieve a filter based on a date input you need to:
1) Include the date picker within your HTML:
<p id="date_filter">
<span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />
</p>
2) Include the following field within your datatable:
"sSearch": "Filter Data"
3) When creating your table, assign it to a variable, for example:
var oTable = $('#datatable').dataTable({
your code goes here...
});
4) Assign the datepicker functionality to your HTML input element:
$("#datepicker_from").datepicker({
showOn: "button",
"onSelect": function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
});
More information about Jquery's datepicker functionality can be found here:
http://api.jqueryui.com/datepicker/
Following is the HTML code:
<table id="myTable" class="dTable1 contentList table table-bordered" style="z-index: 2; ">
<thead id="tableHeader">
<tr id="headerRow">
<th>Time</th>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I am initializing the table on popup open using below JavaScript code:
showHistory = function (contentID) {
debugger;
var auditRes;
//var oTable = $('#AuditListtable').dataTable();
//oTable.fnDestroy();
//alert("outside");
$('#AuditListtable').dataTable({
"sAjaxSource":SERVERURL?contentId=' + contentID,
"aoColumns": [
{ "mData": "AccessDate" },
{
"mData": "EventDescription",
"bSortable": false
},
{
"mData": "IPAddress",
"bSortable": false,
"mRender": function (data, type, row) {
debugger;
return '<td> <span title="' + data + '">Played By: ' + row.FirstName + ', IP Address: ' + data + '</span></td>';
}
}
],
"paging": true,
"sDom": '<"top"p<"clear">>rt',
"sPaginationType": "full_numbers",
"searching": false,
"bFilter": false,
"processing": true,
"bServerSide": true,
"order":true,
"sServerMethod": "POST",
"bAutoWidth": false,
"iDisplayLength": 8
});
$('#historyPopup').modal('show');
}
The data will be populated in pop up. Currently we are having total 9 records but pagination is showing as 5 pages. After clicking on another page, it displays previous record. Table is not refreshed.
You've enabled server-side processing with "bServerSide": true. Most likely your response is incorrect.
If you indeed want server-side processing, your response should be something like:
{
"sEcho": 1,
"iTotalRecords": 9,
"iTotalDisplayRecords": 9,
"aaData": [
// ... skipped ...
]
}
where sEcho should have the value of sEcho parameter from the request, iTotalRecords is number of all records before the filtering, and iTotalDisplayRecords is number of all records after the filtering.
See server-side processing for more information.
I want to hide my data as default, and show the results if something in my Search Box.
Here is my current setting :
<script type="text/javascript">
$( document ).ready(function() {
$('#inventory').dataTable({
"lengthMenu": [ [5], [10, 25, 50, "All"] ],
"bLengthChange": false,
"search": {
"caseInsensitive": true
}
});
var dataTable = $('#inventory').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
});
</script>
Can you search some non-existent value (is there is any) just after creation of datatable like this.
$('#inventory').dataTable({
"lengthMenu": [ [5], [10, 25, 50, "All"] ],
"bLengthChange": false,
"search": {
"caseInsensitive": true
}
});
var dataTable = $('#inventory').dataTable();
dataTable.fnFilter('some non existant value');
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
});
First, wrap a <div> around my table and give it an id = main
<div id="main">
<table class="display" id="inventory">
<thead class="thin-border-bottom ">
<th>SKU</th>
<th>Description</th>
<th>Stock</th>
</thead>
<tbody>
#foreach ( Inventory::all() as $inventory)
<tr>
<td>{{ $inventory->sku }} </td>
<td>{{ $inventory->description }} </td>
<td>{{ $inventory->stock }} </td>
</tr>
#endforeach
</tbody>
</table>
</div>
Second, fix my script to hide that div, and only show it when there is something in the search box.
$('#main').hide();
// Setting to Inventory Table
$('#inventory').dataTable({
"lengthMenu": [ 10 ] ,
"bLengthChange": false,
});
// Bind the value from a new search to the dataTable
var dataTable = $('#inventory').dataTable();
$("#searchbox").keyup(function() {
dataTable.fnFilter(this.value);
$('#main').show(); // show the main div
});
I'm working on Asp .net MVC3.I'm using html table to display the table in front end.and i'm using datatable plugin for pagination,sorting and filtering.when user selects 2 records on page 1 and navigating to the next page confirmation box has to show as 'do you want to submit the selected values?' if the user clicks ok navigation has to be done otherwise it should remain on page1.Following is my table,
<table id="myIndiaTable">
<thead>
<th>Select All<input type="checkbox" class="chkheadind" onchange="Getchecked()" /></th>
#foreach (var item in Model.colName)
{
<th>#item.column_name</th>
}
</thead>
<tbody>
#foreach (var item in Model.bgv)
{
<tr>
<td><input type="checkbox" class="chkdataind"/></td>
<td id ="AsscId">#item.AsscID</td>
<td id ="AsscName">#item.AsscName</td>
<td>#Html.DropDownList("Education", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.Education),new { style = "width: 80px;" })</td>
<td>#Html.DropDownList("Employment", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.Employment),new { style = "width: 100px;" })</td>
<td>#Html.DropDownList("Criminal", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.Criminal),new { style = "width: 80px;" })</td>
<td>#Html.DropDownList("DatabaseTest", new SelectList(Model.dd, "Validation_Code", "Validation_Status", #item.DatabaseTest),new { style = "width: 100px;" })</td>
</tr>
}
</tbody>
</table>
Following is the jquery,
<script type="text/javascript">
$("#myIndiaTable").dataTable({
"bFilter":true,
"bSort": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"bStateSave": true,
"bProcessing": true,
"bDeferRender":true
});
</script>
I have used
"fnDrawCallback": function (oSettings) {
}
to reinitialize something whenever the table is drawn again (its not only in the pagination case). This may not suit your case.
For pagination, the documentation suggest to use
"fnUpdate": function ( oSettings, fnCallbackDraw )
{
// check what you want
// return true or false. true is expected to paginate and false is expected not to paginate
}