I've a dataTable where I have to display the contents fetched from the database. But the problem is , I have to display the contents inside a div. While using "scrollX": true, the table header does not align with the table contents.
It gets displayed like this:
| S.No | Name | Reg. No. | Course |
| 1 | Balamurugan | 211311106078 | BE. Electronics and Communication |
| 2 | Sai Krishna S | 211311107098 | BE. Computer Science |
But it should be like this:
| S.No | Name | Reg. No. | Course |
| 1 | Balamurugan | 211311106078 | BE. Electronics and Communication|
| 2 | Sai Krishna S | 211311107098 | BE. Computer Science |
This is how I tried:
<?php
include("includes/config.php");
$report = $_GET["report"];
$title = $_GET["title"];
$pagetitle = $title;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("includes/inc-head.php"); ?>
</head>
<body role="document">
<?php include("includes/inc-header.php"); ?>
<div class="panel-body form-horizontal">
<div class="panel panel-default">
<div class="panel-heading">
<?php echo $title; ?>
<input type="hidden" id="input_report" name="input_report" value="<?php echo $report; ?>">
<div id="toolbar" name="toolbar" class="btn-group pull-right">
<button id="full_view" name="full_view" type="button" class="btn btn-info btn-sm" onclick="window.open('fullview-for-dashboard.php');">
Full View
</button>
</div>
</div>
<div class="panel-body form-horizontal">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table_dashboard" class="table table-colstriped table-bordered table-hover hide">
<thead>
<tr>
<th></th>
<th>Total Mark</th>
<th>Total Percentage</th>
<th>Name of the Student</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table_profit" class="table table-bordered table-colstriped table-hover hide">
<thead>
<tr>
<th>S. No</th>
<th>Name</th>
<th>Reg. No.</th>
<th>Chain Name</th>
<th>Course</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache: false});
var input_report = jQuery("#input_report").val();
var table_id = "#table_" + input_report;
jQuery(table_id).removeClass("hide").addClass("show");
jQuery(table_id).dataTable({
dom: "<'row'<'col-sm-12'Bftri>>" + "<'row'<'col-sm-4'l><'col-sm-8'p>>",
"sAjaxSource": "db.php?repor_name=" + input_report,
"bDestroy": true,
"scrollX": true,
"bInfo": true,
select: true,
buttons: [{
extend: 'collection',
text: 'Export',
buttons:[
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-file-pdf-o">     PDF</i>',
titleAttr: 'PDF'
},
{
extend: 'excelHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-file-excel-o">     EXCEL</i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-file-text-o">     CSV</i>',
titleAttr: 'CSV'
},
{
extend: 'copyHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: '<i class="fa fa-files-o">     COPY</i>',
titleAttr: 'Copy'
}
]
},
{
extend: 'print',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
});
});
</script>
</body>
</html>
What should I add along with this, so that the table will be displayed properly?
I had the same issue. Seems like it's caused by the way how resizing is handled in the product.
I was able to fix by triggering resize event:
$(window).trigger('resize');
In the source of DataTables you can find the code:
var bindResize = function () {
$(window).bind('resize.DT-'+oSettings.sInstance, _fnThrottle( function () {
_fnAdjustColumnSizing( oSettings );
} ) );
It binds _fnAdjustColumnSizing to resize, but sometime resize isn't triggered.
Update:
Try to set a table width in scrollX parameter:
$('#table').dataTable({
...
scrollX: '100%',
...
});
You need a reference to the DataTable:
var table = $('#table').DataTable();
Then, you need some combination of this:
table.draw();
table.columns.adjust();
table.scroller.measure();
You may need to defer the code for reasons...
setTimeout(function() {
table.draw();
table.columns.adjust();
table.scroller.measure();
}, 1);
Related
I am implementing datatables using three tables in my database.
I joined all threeofthem together (employee, person, suffix).
Datatable is reflected correctly. Butmy problem is when i search an
employee using there first name or employee number,it isworkingfine and
displays the employees base on what i search.However when i search using their
last name, middle name or suffix, it says nomatching records even if that
employee existed.
here is my bladefile
<div id="page-wrapper">
<div class="row">
<div class="page-header"><br>
<h2>Personnel Information List</h2>
<h5>Select Employee Personnel</h5>
</div>
<div class="row">
<div class="col-md-12">
<table id="EmployeeFilter" class="table table-striped table-hover">
<thead>
<tr>
<th> {{ Lang::get("employee.employee_no") }}</th>
<th> {{ Lang::get("employee.employee_name") }}</th>
<th> {{ Lang::get("form.action") }}</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
here is my script
<script type="text/javascript">
var oTable;
$(document).ready(function() {
oTable = $('#EmployeeFilter').DataTable( {
"sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"sPaginationType": "bootstrap",
"bProcessing": true,
"bServerSide": true,
"bStateSave": true,
"sAjaxSource": "{{ URL::to('employee_report/data')}}",
"aoColumns": [
null,
null,
null,
],
"fnDrawCallback": function ( oSettings ) {},
});
});
</script>
and here is my controller that returns the data table
public function data() {
$personnel_employee_list = Employee::join('person','employee.person_id','=','person.id')
->leftJoin('suffix','person.suffix_id','=','suffix.id')
->select(array('employee.id','employee.employee_no','person.first_name', 'person.middle_name','person.last_name','suffix.suffix_name'))
->orderBy('employee.employee_no', 'ASC');
return Datatables::of($personnel_employee_list)
->add_column('actions', '<span class="glyphicon glyphicon-list-alt"></span> View Details
<input type="hidden" name="row" value="{{$id}}" id="row">')
->editColumn('first_name','{{ ucwords(strtolower($first_name." ".$middle_name." ".$last_name." ".$suffix_name)) }}')
->editColumn('first_name','{{ ucwords((str_replace("ñ","ñ",str_replace("Ñ","Ñ",$first_name))." ".str_replace("ñ","ñ",str_replace("Ñ","Ñ",$middle_name))." ".str_replace("ñ","ñ",str_replace("Ñ","Ñ",$last_name)) . " ".str_replace("ñ","ñ",str_replace("Ñ","Ñ",$suffix_name)) )) }}')
->removeColumn('id', 'middle_name', 'last_name', 'suffix_name')
->make();
}
my data table
I'm sorting column data by click on the table header.
I have added the Bootstrap icons based on the v-show condition(s).
Earlier, the sorting worked on the click of the table header but now it should work on the click of icon which are not visible now to the right of 'Present' column.
Need help on this. The origin of issue is on Line 13 in HTML:
<span class="glyphicon glyphicon-sort" v-show="toolAttribute != activeColumn"></span>
https://jsfiddle.net/L5p0ngdu/2/
new Vue({
el: '#app',
data: {
results: {
toolAttribute: [{attributeName: "Present", order: 1},{attributeName: "Present", order: 1},{attributeName: "Present", order: 1}],
device: [
{deviceName: "Device Name 1",
info: [{value: true}, {value: false}, {value: true}]},
{deviceName: "Device Name 2",
info: [{value: false}, {value: false}, {value: false}]},
{deviceName: "Device Name 3",
info: [{value: true}, {value: true}, {value: true}]},
{deviceName: "Device Name 4",
info: [{value: false}, {value: true}, {value: false}]},
{deviceName: "Device Name 5",
info: [{value: true}, {value: true}, {value: true}]}
]
},
activeColumn: {},
currentSort:['deviceName'],
currentSortDir:'asc'
},
computed:{
sortedResults:function() {
return this.results.device.sort(function(a,b){
let modifier = 1;
if(this.currentSortDir === 'desc') modifier = -1;
this.currentSort.forEach(x => {
a = a[x];
b = b[x];
})
if(a< b) return -1 * modifier;
if(a > b) return 1 * modifier;
return 0;
}.bind(this));
}
},
methods:{
flasecond(index){
let res = false
this.results.device[index].info.forEach(info=> {
if(!info.value) res = true
})
return res
},
sort:function(s) {
//if s == current sort, reverse
if(s.join('') === this.currentSort.join('')) {
this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
}
this.currentSort = s;
},
}
})
.falseclass{
background:red;
color:white;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="app">
<table >
<tr>
<th rowspan="2" #click="sort(['deviceName'])">Device Info</th>
</tr>
<tr>
<th v-for="(toolAttribute, index) in results.toolAttribute" :key="index" #click="activeColumn = toolAttribute" :class="{active: toolAttribute == activeColumn}">{{toolAttribute.attributeName}}
<span #click="sort(['info', index, 'value']); toolAttribute.order = toolAttribute.order * (-1)" :class="toolAttribute.order > 0 ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up'" v-show="toolAttribute == activeColumn"></span>
<span class="glyphicon glyphicon-sort" v-show="toolAttribute != activeColumn"></span></th>
</tr>
<tr v-for="(device, index) in sortedResults" >
<td :class="{'falseclass' : flasecond(index)}">{{ device.deviceName }}</td>
<td v-for="info in device.info" :class="{'falseclass' : !info.value}">{{info.value}}</td>
</tr>
</table>
</div>
In your jsfiddle I see that you are using Bootstrap 4. When Bootstrap migrated to v4 the Glyphicons icon font has been dropped. I'd suggest you to take a look at one of these free alternatives:
FontAwesome
Octicons
You could try this
i have made some changes to jsfiddle https://jsfiddle.net/thanseeh/tqy93meL/13/
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<table >
<tr>
<th rowspan="2" #click="sort(['deviceName'])">Device Info</th>
</tr>
<tr>
<th v-for="(toolAttribute, index) in results.toolAttribute" :key="index" #click="activeColumn = toolAttribute" :class="{active: toolAttribute == activeColumn}">{{toolAttribute.attributeName}}
<span #click="sort(['info', index, 'value']); toolAttribute.order = toolAttribute.order * (-1)" :class="toolAttribute.order > 0 ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up'" v-show="toolAttribute == activeColumn"></span>
<span class="glyphicon glyphicon-sort" v-show="toolAttribute != activeColumn"></span></th>
</tr>
<tr v-for="(device, index) in sortedResults" >
<td :class="{'falseclass' : flasecond(index)}">{{ device.deviceName }}</td>
<td v-for="info in device.info" :class="{'falseclass' : !info.value}">{{info.value}}</td>
</tr>
</table>
</div>
</body>
I'm trying to optimize the Datatables buttons pdfHtml5 export of a page. The table data contains nested html tags which are creating additional space above and below the cell data, which makes the PDF very long.
The text in my cell is wrapped in two nested <div> and a <p>. In the PDF export, I only need the contents of the <p>
<td>
<div class="flagimg" style="background-image: url(...)">
<div class="flagtext">
<p>name of country</p>
</div>
</div>
</td>
I'm trying to remove nested html tags using exportOptions, but I'm not sure how to write the syntax correctly. Can anyone help me with this?
$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row) {
data = data.replace(/<div class="flagtext"\">/, '');
data = data.replace(/<.*?>/g, "");
return data;
}
}
}
};
var oTable = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'copyHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5'
} ),
$.extend( true, {}, buttonCommon, {
extend: 'pdfHtml5'
} )
]
});
})
I finally discovered that the problem is not the nested div after all, but rather that the tags are indented in the code instead of being on one line. I've reported this to Datatables and I'm documenting the problem here, in case anyone else runs into it.
I've built on the fiddle #davidkonrad made to illustrate what's happening.
https://jsfiddle.net/lbriquet/7f08n0qa/
In the first row, the nested tags are indented in the code... this produces extra space above and below the country name data in the PDF export.
In the second row I've put all of the tags in the same line of code... and no extra spacing is produced in the PDF export.
<table id="example" width="100%" border="0" cellspacing="0" cellpadding="0" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="myclass">Company name
</div>
</td>
<td>
<div class="flagimg" style="background-image: url(#">
<div class="flagtext">
<p>Country name</p>
</div>
</div>
</td>
<td>
<div class="myclass">Product sold</div>
</td>
</tr>
<tr>
<td>
<div class="myclass">Company name
</div>
</td>
<td><div class="flagimg" style="background-image: url(#)"><div class="flagtext"><p>Country name</p></div></div>
</td>
<td>
<div class="myclass">Product sold</div>
</td>
</tr>
</tbody>
</table>
I develop an application and I used my DataTable and Yadcf.
I have lots of data in my database, so I am used to search in ajax.
I need to filter above the table but now the search is done only on the first page of the table. How to do a search on the whole picture?
My code :
JS
var oTable;
oTable = $('#table-announcement').DataTable({
"processing": true,
"serverSide": true,
"bServerSide": true,
"responsive": true,
"stateSave": true,
"autoWidth": false,
"bJQueryUI": true,
"bStateSave": true,
//"ajax": "/app_dev.php/admin/avantages/announcement/datatable/add/ajax",
ajax: {
url: "/app_dev.php/admin/avantages/announcement/datatable/add/ajax",
type: "POST"
},
"sAjaxDataProp": "data",
"pageLength": 10,
"paging": true,
"searching": true,
"bFilter": true,
"order": [[ 1, 'desc' ]],
"columnDefs": [{
"targets": 'no-sort', // no sort cols
"orderable": false
}],
"language": {
"lengthMenu": $lengthMenu,
"zeroRecords": $zeroRecords,
"info": $info,
"infoEmpty": $infoEmpty,
"infoFiltered": $infoFiltered,
"searchPlaceholder": $searchPlaceholder,
"search":$search,
"sProcessing": $sProcessing,
"oPaginate": {
"sFirst": $sFirst,
"sLast": $sLast,
"sNext": $sNext,
"sPrevious": $sPrevious
}
},
"columns":[
{"data": "announcement"},
{"data": "category"},
{"data": "from"},
{"data": "created_at"},
{"data": "validationDate"},
{"data": "priority"},
{"data": "remainingValidate"},
{"data": "status"},
{"data": "nbcontacts"},
{"data": "htmlActions"}
]
});
yadcf.init(oTable, [
{column_number : 0,
filter_type: "text",
filter_container_id: 'external_filter_title',
filter_default_label: "Titre"
},
{ column_number : 1,
select_type: 'select2',
filter_container_id: 'external_filter_category',
filter_default_label: "Rubrique"
},
{column_number : 2,
filter_type: "text",
filter_container_id: 'external_filter_user_announcement',
filter_default_label: "De"
},
{column_number : 5,
select_type: 'select2',
filter_container_id: 'external_filter_priority',
filter_default_label: "Urgence"
},
{column_number : 7,
select_type: 'select2',
column_data_type: "html",
html_data_type: "text",
filter_container_id: 'external_filter_status',
filter_default_label: "Etat"
}
],{ externally_triggered: true});
Html
<div class="filter-block tiny-full">
<div class="row">
<div class="col-xs-12 tiny-full list-count">
<div>
<span><b>{{ nbannouncement }}</b></span> {{ 'message.linkingAnnoucement.list.label_mer1'|trans }} <span><b>{{ nbAnnouncementsPending }}</b></span> {{ 'message.linkingAnnoucement.list.label_mer2'|trans }}
</div>
<div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 filter-content">
<div class="filter-table">
<div class="filter-table-cell">
<div class="label_filter">{{ 'message.linkingAnnoucement.list.filter.filter_announcement'|trans }} </div><div class="filter"><span id="external_filter_title"></span></div>
</div>
<div class="filter-table-cell">
<div class="label_filter">{{ 'message.linkingAnnoucement.list.filter.filter_category'|trans }} </div><div class="filter"><span id="external_filter_category"></span></div>
</div>
<div class="filter-table-cell">
<div class="label_filter">{{ 'message.linkingAnnoucement.list.filter.filter_from'|trans }} </div><div class="filter"><span id="external_filter_user_announcement"></span></div>
</div>
<div class="filter-table-cell">
<div class="label_filter">{{ 'message.linkingAnnoucement.list.filter.filter_priority'|trans }} </div><div class="filter"><span id="external_filter_priority"></span></div>
</div>
<div class="filter-table-cell">
<div class="label_filter">{{ 'message.linkingAnnoucement.list.filter.filter_state'|trans }} </div><div class="filter"><span id="external_filter_status"></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped hover dataTable no-footer" id="table-announcement">
<thead>
<tr>
<th class="col-md-3">
{{ 'message.linkingAnnoucement.list.tab.tab_announcement'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_category'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_from'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_created_date'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_diffusion_date'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_priority'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_time_remaining'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_state'|trans }}
</th>
<th class="col-md-1">
{{ 'message.linkingAnnoucement.list.tab.tab_nb_contact'|trans }}
</th>
<th class="col-md-1 no-sort">
</th>
</tr>
</thead>
<tbody class="panel-body">
</tbody>
</table>
</div>
</div>
My symfony controler
public function paginateAction(Request $request)
{
$this->initImgManager();
$formatter = new \IntlDateFormatter(\Locale::getDefault(), \IntlDateFormatter::NONE, \IntlDateFormatter::NONE);
$formatter->setPattern("d MMMM YYYY");
$this->formatter = $formatter;
$length = $request->get('length');
$length = $length && ($length!=-1)?$length:0;
$start = $request->get('start');
$start = $length?($start && ($start!=-1)?$start:0)/$length:0;
$search = $request->get('search');
$filters = [
'query' => #$search['value']
];
$announcements = $this->getDoctrine()->getRepository('AppBundle:Announcement\Announcement')->search(
$filters, $start, $length
);
$output = array(
'data' => array(),
'recordsFiltered' => count($this->getDoctrine()->getRepository('AppBundle:Announcement\Announcement')->search($filters, 0, false)),
'recordsTotal' => count($this->getDoctrine()->getRepository('AppBundle:Announcement\Announcement')->search(array(), 0, false))
);
/**
* #var Announcement $announcement
*/
foreach ($announcements as $announcement)
{
// first image announcement
if ($announcement->getPicturesFiles()->count() > 0)
{
$image = $announcement->getPicturesFiles()->first()->getFilePath();
$handlingAnnouncementFirst = $this->imageHandlingManager->open($image)->zoomCrop(75, 75, 'transparent')->guess(100);
$imageAnnouncementFirst = $this->assetsHelper->getUrl($handlingAnnouncementFirst);
$htmlAnnouncement = '<figure>
<img src="'.$imageAnnouncementFirst.'">
<figcaption>
'.$announcement->getTitle().'
</figcaption>
</figure>';
}
else
{
$htmlAnnouncement = '<figure>
<figcaption>
'.$announcement->getTitle().'
</figcaption>
</figure>';
}
// image user from
if (!empty($announcement->getUsers()->getFile()))
{
$image = $announcement->getUsers()->getFile()->getFilePath();
$handlingUser = $this->imageHandlingManager->open($image)->zoomCrop(45, 45, 'transparent')->guess(100);
$imageUser = $this->assetsHelper->getUrl($handlingUser);
$htmlUserFrom = '<div style="float:left;">
<figure>
<img class="img-circle" src="'.$imageUser.'">
</figure>
</div>
<div style="float:left;">
'.$announcement->getUsers()->getFirstname().' '.$announcement->getUsers()->getLastname().'
</div>';
}
else
{
$htmlUserFrom = '<div style="float:left;">
<div class="job-resume-img-author"></div>
</div>
<div style="float:left;">
'.$announcement->getUsers()->getFirstname().' '.$announcement->getUsers()->getLastname().'
</div>';
}
// remaining time
if (!empty($announcement->getDuration()->getDuration()) && !empty($announcement->getValidationDate()))
{
/** #var AppExtension $twigExtensionService */
$twigExtensionService = $this->get('app.twig_extension');
$requestAttributes = $this->container->get('request')->attributes;
$remainingValidateAnnouncement = $twigExtensionService->remainingtimeFilter($announcement->getDuration()->getDuration(), $announcement->getValidationDate()->format('Y-m-d H:i:s'), $announcement->getId());
}
else
{
$remainingValidateAnnouncement = "-";
}
// status
$htmlStatus = '<span class="label '.$announcement->getStatus()->getClassStatus().'">
'.$announcement->getStatus()->getName().'
</span>';
// actions
$translator = $this->get('translator');
$tradAction = $translator->trans('message.common.btn.lib_action');
$tradView = $translator->trans('message.common.btn.lib_action');
$urlView = $this->generateUrl('avantages_backend_mer_edit', array("id" => $announcement->getId()));
$htmlActions = '<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
'.$tradAction.'
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu pull-right text-left">
<li>'.$tradView.'</li>
</ul>
</div>';
$output['data'][] = [
'announcement' => $htmlAnnouncement,
'category' => $announcement->getCategory()->getName(),
'from' => $htmlUserFrom,
'created_at' => $this->formatter->format($announcement->getCreatedDate()),
'validationDate' => (!empty($announcement->getValidationDate()) ? $this->formatter->format($announcement->getValidationDate()):'-'),
'priority' => $announcement->getPriority()->getName(),
'remainingValidate' => $remainingValidateAnnouncement,
'status' => $htmlStatus,
'nbcontacts' => $announcement->getLinkingsannouncements()->count(),
'htmlActions' => $htmlActions,
];
}
return new Response(json_encode($output), 200, ['Content-Type' => 'application/json']);
Since you are using "bServerSide": true you must implement the filtering logic on your server side just like in the showcase page - Server side source example , the showcase is written in JAVA, but you can get the general idea from the source code that can be found on github, in general you have to read the filtered values from the request (JAVA)
Just like you read the global filter String globalSearch = req.getParameter("search[value]");
You will have to read filtered value for each column (for example first/second coulmns)
String sSearch_0 = req.getParameter("columns[0][search][value]");
String sSearch_1 = req.getParameter("columns[1][search][value]");
Also, in case that you want to populate your select / auto_complete filters with values you have to add to your current JSON the following attributes yadcf_data_0 / yadcf_data_1 / etc'
where each attribute contains a list of strings
For example:
"yadcf_data_0":["KHTML","Webkit","Trident","Misc","Other browsers","Tasman","Presto","Gecko"],
Again, you should read the notes on the showcase page
I'm working on a project of Fees Management System for my elder brother's school project by using bootstrap 3, php, mysql.
I'm using bootstrap's plugin dataTables and unable to see the dataTables tableTools menu with dataTables. I downloaded tableTools from github and include all necessary files in dashboard page but tableTools is not working for me. Anyone can help me?
I include these files in my student-dashboard.php's head section :-
<!-- DataTables CSS -->
<link href="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables tableTools CSS -->
<link rel="stylesheet" type="text/css" href="../bower_components/datatables-plugins/TableTools/css/dataTables.tableTools.css">
<!-- DataTables Responsive CSS -->
<link href="../bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<!-- DataTables tableTools JS -->
<script type="text/javascript" language="javascript" src="../bower_components/datatables-plugins/TableTools/js/dataTables.tableTools.js"></script>
And here are the codes for dataTables :
<div class="dataTable_wrapper row">
<div class="col-lg-12 table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-view">
<thead>
<tr>
<th>ID</th>
<th>Roll Number</th>
<th>Student Name</th>
<th>Class</th>
<th>Fee Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$sql = mysql_query("SELECT * FROM student_info ORDER BY student_roll_number");
while($row = mysql_fetch_array($sql)){
$id = $row["student_id"];
$rollnumber = $row["student_roll_number"];
$fname = $row["student_fname"];
$lname = $row["student_lname"];
$class = $row["student_class"];
echo '
<tr>
<td> '.$id.'</td>
<td> '.$rollnumber.'</td>
<td> '.$fname.' '.$lname.'</td>
<td><i class="icon-group"></i> '.$class.'</td>
<td><center>Pending</center></td>
<td><center>
<div class="btn-group text-center">
<i class="fa fa-eye fa-1x"></i>
<i class="fa fa-edit fa-1x"></i>
<i class="fa fa-trash-o fa-1x"></i>
</div></center>
</td>
</tr>
';
}
?>
</tbody>
</table>
</div>
</div>
And in end of the page i used following codes for initializing dataTables:
<script>
$(document).ready(function() {
$('#dataTables-view').DataTable({
responsive: true,
"order": [ 0, "desc" ],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
"lengthMenu": [ [7, 20, 50, -1], [7, 20, 50, "All"] ],
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
});
});
</script>
The final output is this : In this picture, You can see there is no dataTables tableTools menu showing...
but i need this kind of output for my student dashboard page.
Anyone can help me to sort out this issue...?
If only print and Copy button works, then there should be problem in .swf file. Make sure the path of the file is correct
After clicking the buttons (except print and copy), See whether you are getting any error in the console. If the path of the file is wrong, you will get error in the console.