Skip to content

Commit

Permalink
feat(dt): Make some columns select
Browse files Browse the repository at this point in the history
  • Loading branch information
@iamareebjamal
iamareebjamal committed Nov 11, 2018
1 parent 0939c1e commit 7078c4c
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 69 deletions.
29 changes: 23 additions & 6 deletions src/main/resources/src/datatable/faculty.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,30 @@ const columns = [{
}];

const searchOptions = [{
id: '#working-status',
name: 'working',
defaultVal: true
defaultVal: 'true',
options: [{
name: 'All',
value: ''
}, {
name: 'Working',
value: 'true'
}, {
name: 'Inactive',
value: 'false'
}]
}, {
id: '#gend',
name: 'gender'
name: 'gender',
options: [{
name: 'All',
value: ''
}, {
name: 'Male',
value: 'M'
}, {
name: 'Female',
value: 'F'
}]
}];

const table = facultyTable.DataTable({
Expand Down Expand Up @@ -133,8 +151,7 @@ const table = facultyTable.DataTable({
buttons: ['copy', 'csv', 'print'],
initComplete() {
searchDelay(table);
attachSelectors(table, 'DataTables_facultyTable_/admin/dean/faculty', searchOptions);
addSearchColumns(table)
addSearchColumns(table, searchOptions)
}
});

Expand Down
32 changes: 26 additions & 6 deletions src/main/resources/src/datatable/students.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,12 +127,33 @@ const columns = [
const menuLength = [10, 25, 50, 100, 200, 500];

const searchOptions = [{
id: '#gend',
name: 'gender'
name: 'gender',
options: [{
name: 'All',
value: ''
}, {
name: 'Male',
value: 'M'
}, {
name: 'Female',
value: 'F'
}]
}, {
id: '#stat',
defaultVal: 'A',
name: 'status'
name: 'status',
options: [{
name: 'All',
value: ''
}, {
name: 'Active',
value: 'A'
}, {
name: 'Graduated',
value: 'G'
}, {
name: 'Name Removed',
value: 'N'
}]
}];

const table = studentTable.DataTable({
Expand Down Expand Up @@ -182,8 +203,7 @@ const table = studentTable.DataTable({
lengthMenu: [menuLength, menuLength],
initComplete() {
searchDelay(table);
attachSelectors(table, 'DataTables_studentTable_/admin/dean/students', searchOptions);
addSearchColumns(table);
addSearchColumns(table, searchOptions);
}
});

Expand Down
25 changes: 21 additions & 4 deletions src/main/resources/src/datatable/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function getSearchConfig(columns, options) {
});
}

export function addSearchColumns(table) {
export function addSearchColumns(table, searchOptions) {
const settings = table.settings()[0];
const stateKey = `DataTables_${ settings.sInstance }_${ window.location.pathname }`;

Expand All @@ -68,14 +68,31 @@ export function addSearchColumns(table) {

const footer = this.footer();
const title = footer.innerText;
footer.innerHTML = `<input type="text" placeholder="${ title }" value="${ value }" />`;
let select = `<input type="text" placeholder="${ title }" value="${ value }" />`;

if (searchOptions) {
const option = searchOptions.filter(option => option.name === setting.name)[0];

if (option) {
select = `<select>${option.options.map(option =>
`<option value="${option.value}" ${ option.value == defaultValue ? 'selected' : '' }>
${ option.name }
</option>`).join('')}
</select>`
}
}

footer.innerHTML = select;

const that = this;

$('input', this.footer()).on('keyup change', $.debounce(500, function () {
const changeHandler = function () {
if (that.search() !== this.value) {
that.search(this.value).draw();
}
}));
};

$('input', this.footer()).on('keyup change', $.debounce(500, changeHandler));
$('select', this.footer()).on('change', changeHandler);
});
}
26 changes: 0 additions & 26 deletions src/main/resources/templates/dean/faculty_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,6 @@ <h4 class="card-title">Faculty Members</h4>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3 col-xl-2">
<div class="mui-form">
<div class="p-1 mui-select">
<label for="working-status">Working Status : </label>
<select id="working-status">
<option value="">All</option>
<option value="true">Working</option>
<option value="false">Inactive</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-3 col-xl-2">
<div class="mui-form">
<div class="p-1 mui-select">
<label for="gend">Gender : </label>
<select id="gend">
<option value="">All</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
</div>
</div>
</div>
<table id="facultyTable" class="table display table-striped table-bordered">
<!-- Header Table -->
<thead>
Expand Down
27 changes: 0 additions & 27 deletions src/main/resources/templates/dean/students_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,6 @@ <h4 class="card-title">Students</h4>
</div>
<div class="card-content collapse show">
<div class="card-body card-dashboard">
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3 col-xl-2">
<div class="mui-form">
<div class="p-1 mui-select" id="statuses">
<label for="stat">Status : </label>
<select id="stat">
<option value="">All</option>
<option value="A">Active</option>
<option value="G">Graduated</option>
<option value="N">Name Removed</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-3 col-xl-2">
<div class="mui-form">
<div class="p-1 mui-select">
<label for="gend">Gender : </label>
<select id="gend">
<option value="">All</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
</div>
</div>
</div>
<table id="studentTable" class="table display table-striped table-bordered">
<!-- Header Table -->
<thead>
Expand Down

0 comments on commit 7078c4c

Please sign in to comment.