Related
How to make this kinda search filter in ag grid vue?
Link for photo: https://ibb.co/cwVq7DD
Docs link: https://www.ag-grid.com/vue-data-grid/tool-panel-columns/#read-only-functions
I tried to use but this search filter not displaying.
<template>
<div>
<ag-grid-vue
style="width: 1270px; height: 175px"
class="ag-theme-alpine"
:columnDefs="columnDefs"
#grid-ready="onGridReady"
:defaultColDef="defaultColDef"
:autoGroupColumnDef="autoGroupColumnDef"
:pivotMode="true"
:sideBar="sideBar"
:rowGroupPanelShow="rowGroupPanelShow"
:pivotPanelShow="pivotPanelShow"
:rowData="rowData"
:alwaysShowHorizontalScroll="true"
:alwaysShowVerticalScroll="true">
</ag-grid-vue>
</div>
</template>
Also You can see vue scripts for ag-grid, that I tried to run for html template :
<script>
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";
export default {
name: "WbCardDetail",
components: {
AgGridVue,
},
setup() {
return {
columnDefs: [
{ headerName: "№", field: "position", filter: 'agTextColumnFilter', filterParams: {
textMatcher: ({filter, value, filterText}) => {
// custom matching logic that returns a boolean
}
} },
{ headerName: "Фото", field: "thumb", filter: 'agTextColumnFilter' },
{ headerName: "Цена ставки", field: "cpm", filter: 'agTextColumnFilter' },
{ headerName: "SKU", field: "id", filter: 'agTextColumnFilter' },
],
rowData: [
{ position: "1", thumb: "Photo", cpm: "120"},
],
defaultColDef: {
flex: 1,
minWidth: 100,
filter: true,
sortable: true,
enablePivot: true,
enableValue: true,
enableRowGroup: true,
resizable: true,
}
}
},
created() {
this.autoGroupColumnDef = {
minWidth: 200,
};
this.sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Столбцы',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressRowGroups: true,
suppressValues: true,
suppressPivots: true,
suppressPivotMode: true,
suppressColumnFilter: true,
suppressColumnSelectAll: true,
suppressColumnExpandAll: true,
},
},
],
defaultToolPanel: 'columns',
};
},
}
</script>
Thanks!
I found the answer, search works only on non-free version of ag-grid!
I am using the SearchBuilder extension to filter data.
Because I am also using sever-side processing, I force a search only when the user presses the enter key, like example.
But when I click button ">" to add new criteria, the previous value is empty.
Any suggestion for me?
Here my code:
I use search:{true} to force search only search only user press enter
$table = $(`#${_options.table.id}`).DataTable({
dom: 'Blfrtip',
search: {
return: true
},
"processing": true, // for show progress bar
"serverSide": true,
"filter": true,
"pageLength": 2,
"pagingType": "full_numbers",
"ajax": {
"url": _options.table.urls.load,
"type": "POST",
"datatype": "json"
},
"ordering": true,
"order": [[2,'asc']],
//"order": [[0, 'asc'], [1, 'asc']]
"columns":[
{
"data": null,
"orderable": false,
"searchable": false,
"className": "text-center",
render: function (data, type, row, meta) {
let html = `<div class="icheck-primary input-group" style="display:block;">
<input type="checkbox" id="example1_${meta.row}">
<label for="example1_${meta.row}"></label>
</div>`;
return html;
},
searchBuilderType: 'html'
},
{
"data": "id",
"name": "Mã số",
"autoWidth": true,
"visible": false,
"searchable": false
},
{
"data": "title",
"name": "Tên danh mục",
"autoWidth": true,
searchBuilderType: 'string'
},
{
"data": "created",
"name": "Ngày tạo",
"autoWidth": true,
render: function (data, type, row, meta) {
return new Date(data).toLocaleDateString("vi-VN");
}
},
{
"data": "modified",
"name": "Ngày chỉnh sữa",
"autoWidth": true,
render: function (data, type, row, meta) {
return new Date(data).toLocaleDateString("vi-VN");
}
},
{
"data": "active",
"name": "Hoạt động",
"autoWidth": true,
"className": "text-center",
"width": "10%",
render: function (data, type, row, meta) {
let html = `<div class="icheck-primary input-group" style="display:block;">
<input disabled type="checkbox" ${data ? 'checked' : ''} id="example1_active_${meta.row}" name="terms">
<label for="example1_active_${meta.row}"></label>
</div>`;
return html;
}
},
{
"orderable": false,
"width": "15%",
"className": "text-center",
"data": null,
"render": function (data, type, row, meta) {
return `<a class="btn btn-info btn-sm" onclick="Edit('${row.id}', '${row.title}');" href="#">Edit</a> <a href="#" class="btn btn-danger btn-sm" onclick="Delete('${row.id}', '${row.title}');" >Delete</a>`;
}
}
],
"createdRow": function (row, data, dataIndex) {
let checkbox = $(row).children('td').first().find('input[type="checkbox"]');
let headerCheckbox = $($table.column().header()).find('input[type=checkbox]');
headerCheckbox.prop('checked', false);
checkbox.on('change', { rowIndex: dataIndex }, function (e) {
let checked = $(this).prop('checked');
let headerCheckbox = $($table.column().header()).find('input[type=checkbox]');
let tableId = $table.table().node().id;
let deletebutton = $(`button[aria-controls = ${tableId}][name=delete]`);
let rowIdx = e.data.rowIndex;
if (checked) {
$table.rows(rowIdx).select();
$count++;
if ($count == $table.rows().count()) {
headerCheckbox.prop('checked', true);
}
deletebutton.attr('disabled', false);
}
else {
$table.rows(rowIdx).deselect();
$count--;
if ($count == 0) {
deletebutton.attr('disabled', true);
}
headerCheckbox.prop('checked', false);
}
});
},
"initComplete": function (settings, json) {
// Add custom button into table wrapper
$table.buttons().container().appendTo(`#${_options.table.id}_wrapper .col-md-6:eq(0)`);
//Select all bycheckbox header
let headerCheckbox = $($table.column().header()).find('input[type=checkbox]');
headerCheckbox.on('change', { settings: settings }, function (e) {
let checked = $(this).prop('checked');
for (let i = 0; i < $table.rows().count(); i++) {
$($table.rows(i).column().nodes()[i]).find('input[type="checkbox"]').prop('checked', checked);
}
let deletebutton = $(`button[aria-controls = ${_options.table.id}][name=delete]`).attr('disabled', !checked);
(checked) ? $table.rows().select() : $table.rows().deselect();
});
},
"responsive": true,
"lengthChange": false,
"autoWidth": false,
language: {
searchBuilder: {
button: {
0: 'Criteria',
1: 'Criteria (one selected)',
_: 'Criteria (%d)'
}
}
},
"buttons": [
{
text: `<i class="fas fa-plus"> New</i>`,
className: 'btn btn-primary form-group',
attr: {
'name': 'new',
'style': 'background: #007bff !important; border-color: #007bff !important'
},
action: function (e, dt, node, config) {
ajaxFormAction(_options.modal.selector, _options.modal.id, 'Create new category', '/Admin/Category/Create', true, function (e) {
$table.draw();
});
}
},
{
text: `<i class="fas fa-trash"> Delete</i>`,
className: 'btn btn-danger form-group',
attr: {
'name': 'delete',
"disabled": true
},
action: function (e, dt, node, config) {
let ids = [];
let rows = $table.rows({ selected: true }).every(function (rowIdx, tableLoop, rowLoop) {
ids.push(this.data().id);
});
ids = ids.join(',');
ajaxDelete(ids, null, _options.table.urls.delete, function (e) {
$table.draw();
});
}
},
{
text: 'Filter',
className: 'btn btn-default form-group',
extend: 'searchBuilder'
}
]
})
$('<input id="example1_column" type="text" class="form-control form-control-sm" placeholder="aaaa" />').insertBefore($("#example1_filter input"));
return $table
I am trying to load a datatable on click of a button outside the datatable.
below is my piece of code
$('#buttonToLoadDatatable').on('click', function() {
$.ajax({
type: "GET",
url:"../fhParser/fhParser/downloadAndParseResume/v1",
}).done(function (result) {
var table = $('#example').DataTable( {
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-
12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i
class="glyphicon glyphicon-search"></i></span>'
},
"bDestroy": true,
"data":result,
"iDisplayLength": 15,
/**this portion was because I have a collapsible rows**/
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data":"email" }
],
rowCallback: function (row, data) {},
filter: false,
info: false,
ordering: false,
processing: true,
retrieve: true,
"fnDrawCallback": function( oSettings ) {
runAllCharts()
}
// rowCallback: function (row, data) {}
} );
console.log( result );
}).fail(function (jqXHR, textStatus, errorThrown) {
});
});
When I print the value in the browser console, it comes correctly as
{"email": "triedandtest#gmail.com"}, but it does not display in the datatable
There is no error also in the console or at the backend
Can you replace your code to
$('#buttonToLoadDatatable').on('click', function() {
$.ajax({
type: "GET",
url:"../fhParser/fhParser/downloadAndParseResume/v1",
}).done(function (result) {
var table = $('#example').DataTable( {
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-
12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i
class="glyphicon glyphicon-search"></i></span>'
},
"bDestroy": true,
"data":result.data,
"iDisplayLength": 15,
/**this portion was because I have a collapsible rows**/
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data":"email" }
],
rowCallback: function (row, data) {},
filter: false,
info: false,
ordering: false,
processing: true,
retrieve: true,
"fnDrawCallback": function( oSettings ) {
runAllCharts()
}
// rowCallback: function (row, data) {}
} );
console.log( result );
}).fail(function (jqXHR, textStatus, errorThrown) {
});
});
and check if that works
FYI changed "data":result, to "data":result.data,
My snippets below shows a datatables example that has 3 rows, I have added an extra column in column definition "action" and I m setting its display/data via default content and render functions respectively.
every time I try to build an JSON data containing the column "action" val i fail. I added the cell click listener (disabled in this action) just to make sure that the data is stored in the API data collection and it is indeed, yet it fails to show up after building the values.
if you click "build vals" you will see how the "action" data is not included in JSON. if you click "Mark for delete" and then "build vals" the "action" data will show up.
any idea how to make it work?
var tablenest = $('#RegSrc').DataTable({
select: true,
"bPaginate": false,
"bFilter": false,
responsive: true,
deferRender: true,
"processing": true,
"serverSide": false,
bAutoWidth: true,
data: [{
"RecID": 2383,
"PtFilenum": 15090248,
"PrtFilenum": 13090701,
"Fullname": "Salem",
"PrtStatus": 1
}, {
"RecID": 2384,
"PtFilenum": 15090248,
"PrtFilenum": 15120996,
"Fullname": "Tony",
"PrtStatus": 1
}, {
"RecID": 2385,
"PtFilenum": 15090248,
"PrtFilenum": 170227111,
"Fullname": "Jorge",
"PrtStatus": 1
}],
order: [2, 'asc'],
keys: {
columns: ':not(:first-child)',
keys: [9]
},
columns: [
{ // Checkbox select column
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
"width": "1%"
},
{
"width": "50%",
data: "RecID",
"visible": false
},
{
"width": "50%",
data: "PtFilenum",
"visible": false
},
{
"width": "10%",
data: "PrtFilenum"
},
{
"width": "40%",
data: "Fullname"
},
{
"width": "10%",
data: "PrtStatus",
render: function(data, type, row) {
if (type === 'display') {
if (data == 1) {
return 'Partners';
} else {
return 'Not Partners';
}
}
return data;
},
className: "dt-body-center"
},
{
"width": "10%",
data: 'action',
defaultContent: 'update',
orderable: false,
className: "dt-body-center",
"visible": true,
render: function(data, type, row) {
if (data == null) {
return 'update';
} else {
return data;
}
}
},
],
});
/* $('#RegSrc tbody').on('click', 'td', function () {
console.log(tablenest.cell(this).data());
});*/
$("#btn1").click(function() {
tablenest.rows({
selected: true
}).every(function(rowIdx, tableLoop, rowLoop) {
tablenest.row(this).cell(rowIdx, 6).data('delete').draw()
var row = tablenest.row(this).node();
$(row).css('color', 'red').animate({
color: 'black'
});
});
return false;
})
$("#btn2").click(function() {
var tbldta = $.map(tablenest.rows().data(), function(d, i) {
var myObject = new Object();
myObject = {
action: d.action,
RecID: d.RecID,
PrtStatus: d.PrtStatus,
ptfilenum: d.PtFilenum,
PrtFilenum: d.PrtFilenum
}
return myObject
});
var DtaObj = {}
DtaObj.Data = tbldta
console.log(JSON.stringify(DtaObj))
return false;
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.15/b-1.3.1/se-1.2.2/datatables.min.js"></script>
<button id="btn2" class="btn btn-primary">build vals</button>
<button id="btn1" class="btn btn-primary">Mark For Delete</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>click here to select</th>
<th><b>RecID</b></th>
<th><b>Patient File Number</b></th>
<th><b>Partner File Number</b></th>
<th><b>Patient Name</b></th>
<th><b>Status</b></th>
<th><b>action</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Include "action":"update" to your data source in constructor.
columns.defaultContent is static and therefore cannot possibly access
the data.
Also you can remove render from "action" column.
var tablenest = $('#RegSrc').DataTable({
select: true,
"bPaginate": false,
"bFilter": false,
responsive: true,
deferRender: true,
"processing": true,
"serverSide": false,
bAutoWidth: true,
data: [{
"RecID": 2383,
"PtFilenum": 15090248,
"PrtFilenum": 13090701,
"Fullname": "Salem",
"PrtStatus": 1,
"action": "update"
}, {
"RecID": 2384,
"PtFilenum": 15090248,
"PrtFilenum": 15120996,
"Fullname": "Tony",
"PrtStatus": 1,
"action": "update"
}, {
"RecID": 2385,
"PtFilenum": 15090248,
"PrtFilenum": 170227111,
"Fullname": "Jorge",
"PrtStatus": 1,
"action": "update"
}],
order: [2, 'asc'],
keys: {
columns: ':not(:first-child)',
keys: [9]
},
columns: [
{ // Checkbox select column
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
"width": "1%"
},
{
"width": "50%",
data: "RecID",
"visible": false
},
{
"width": "50%",
data: "PtFilenum",
"visible": false
},
{
"width": "10%",
data: "PrtFilenum"
},
{
"width": "40%",
data: "Fullname"
},
{
"width": "10%",
data: "PrtStatus",
render: function(data, type, row) {
if (type === 'display') {
if (data == 1) {
return 'Partners';
} else {
return 'Not Partners';
}
}
return data;
},
className: "dt-body-center"
},
{
"width": "10%",
data: 'action',
orderable: false,
className: "dt-body-center",
"visible": true
},
],
});
/* $('#RegSrc tbody').on('click', 'td', function () {
console.log(tablenest.cell(this).data());
});*/
$("#btn1").click(function() {
tablenest.rows({
selected: true
}).every(function(rowIdx, tableLoop, rowLoop) {
tablenest.row(this).cell(rowIdx, 6).data('delete').draw()
var row = tablenest.row(this).node();
$(row).css('color', 'red').animate({
color: 'black'
});
});
return false;
})
$("#btn2").click(function() {
var tbldta = $.map(tablenest.rows().data(), function(d, i) {
var myObject = new Object();
console.log(d);
myObject = {
action: d.action,
RecID: d.RecID,
PrtStatus: d.PrtStatus,
ptfilenum: d.PtFilenum,
PrtFilenum: d.PrtFilenum
}
return myObject
});
var DtaObj = {}
DtaObj.Data = tbldta
console.log(JSON.stringify(DtaObj))
return false;
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.15/b-1.3.1/se-1.2.2/datatables.min.js"></script>
<button id="btn2" class="btn btn-primary">build vals</button>
<button id="btn1" class="btn btn-primary">Mark For Delete</button>
<table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>click here to select</th>
<th><b>RecID</b></th>
<th><b>Patient File Number</b></th>
<th><b>Partner File Number</b></th>
<th><b>Patient Name</b></th>
<th><b>Status</b></th>
<th><b>action</b></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have an alignement problem with datatables. I checked other topics about this but still un resolved.
I generate a tbody with json datas, and first problem, the tbody is generated in a different table. This way, I have on one hand the head of the table, and on the other, the body. Really weird to me.
Second thing, and for me it's because of the first point, the head and the body are not aligned.
I precise that this is a project on which I took the hand. So I didn't build it myself, and I'm not relly comfortable with datatables.
Here is the source code :
<table border="0" id="articleStatsByUser">
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Nom du compte</th>
<th>Site</th>
<th>Marque</th>
<th>DE</th>
<th>Nb<br>d'articles<br>consultés</th>
<th>DO</th>
<th>Email</th>
<th>Login</th>
<th>Date de dernière connexion</th>
<th>Date de dernière connexion échouée</th>
<th>Nb de connexions depuis l'espace privé</th>
<th>Nb de connexions depuis la Newsletter</th>
<th>Droit d'accès</th>
<th>OCRM-ID</th>
<th></th>
</tr>
</thead>
</table>
<script type="text/javascript">
var info = false;
var paginate = false;
var filter = true;
var viewDetailLink = '<%= viewDetailLink %>';
var jsonData = <%= userViewsJson %>;
$(document).ready(function($) {
var oTable = $('#articleStatsByUser').dataTable( {
"bInfo": info,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/html/js/datatables/extras/TableTools/swf/copy_csv_xls.swf",
"aButtons": [{"sExtends": "xls","sButtonText": 'Export le résultat en Excel', "sTitle": "statistiques-clients - COMPASS GROUP France"}]},
"sPaginationType": "full_numbers",
"sScrollY": "400px",
"sScrollX": "100%",
"bPaginate": paginate,
"bFilter": filter,
"bScrollCollapse": true,
"bProcessing": true,
"bDeferRender": true,
"aaData": jsonData,
"aoColumns": [
{
"mData": "userName",
"id": "userName"
},
{
"mData": "userFirstName"
},
{
"mData": "userJob",
"id": "userJob"
},
{
"mData": "userSite"
},
{
"mData": "groupUser",
"id": "groupUser"
},
{
"mData": "userDE",
"id": "userDE"
},
{
"mData": "nbArticlesViews"
},
{
"mData": "userDO",
"bVisible": false
},
{
"mData": "userEmail",
"bVisible": false
},
{
"mData": "userScreenName",
"bVisible": false
},
{
"mData": "lastLoginDateExpr",
"bVisible": false
},
{
"mData": "lastFailedLoginDateExpr",
"bVisible": false
},
{
"mData": "nbConnexions",
"bVisible": false
},
{
"mData": "nbConnexionsNewsletter",
"bVisible": false
},
{
"mData": "droitAcces",
"bVisible": false
},
{
"mData": "userOCRMID",
"bVisible": false
},
{
"mData": null,
"bSortable": false,
"mRender": function( cell, type, row ){
if (type === 'display')
return '<img src="/html/icons/zoom-icon.png">';
return cell;
}
}
]});
}
</script>
I really need some help on this one.
Thanks