import {components} from 'metronic-extension';

function initColumnVisibilityTable() {
  return new components.Datatable(ref.columnVisibilityTable, {
    dom: `<'row align-items-center'<'col-auto'B><'col dataTables_pager'p>><'row'<'col-12'tr>><'row'<'col-12 dataTables_pager'p>>`,
    columnDefs: [
      {targets: 0, data: 'name'},
      {targets: 1, data: 'position'},
      {targets: 2, data: 'office'},
      {targets: 3, data: 'age'},
      {targets: 4, data: 'startDate'},
      {targets: 5, data: 'salary'},
    ],
    pageLength: 3,
    buttons: [
      // Button to toggle column visibility.
      {
        extend: 'colvis',
        text: 'Show / hide columns',
        // Columns selector that defines the columns to include in the column visibility button set.
        // CSS selectors, column indexes, etc. can be used to specify columns to switch visibility.
        columns: ':eq(1),:eq(2),:eq(3),:eq(4),:eq(5)',
        // columns: [1,2,3,4,5],
      }
    ],
    // Save the column visibility in the browser.
    stateSave: true,
    /* Enable/Disable saving for various datatables elements. Delete any items you do not wish to save.
        - data.columns.search: This option allows for the saving of the search applied to individual columns to be enabled or disabled.
        - data.columns.visible: This option allows for the saving of the visibility of the columns to be enabled or disabled.
        - data.length: This option allows for the saving of the page length to be enabled or disabled.
        - data.order: This option allows for the saving of the tables column sorting to be enabled or disabled.
        - data.paging: This option allows for the saving of the paging to be enabled or disabled.
        - data.scroller: This option allows for the saving of the scroller position to be enabled or disabled.
        - data.search: This option allows for the saving of the search to be enabled or disabled.
        - data.searchBuilder: This option allows for the saving of the searchBuilder state to be enabled or disabled.
        - data.searchPanes: This option allows for the saving of the searchPanes state to be enabled or-  disabled.
        - data.select: This option allows for the saving of the select state to be enabled or disabled.
    */
    stateSaveParams: (_, data) => {
      delete data.columns.search;
      // delete data.columns.visible;
      delete data.length;
      delete data.order;
      delete data.paging;
      delete data.scroller;
      delete data.search;
      delete data.searchBuilder;
      delete data.searchPanes;
      delete data.select;
    }
  });
}

// Search for elements.
const ref = components.selectRef();

// Initialize DataTable.
const columnVisibilityTable = initColumnVisibilityTable();
            

              import {components} from 'metronic-extension';

function initColumnVisibilityWithIconButtonTable() {
  return new components.Datatable(ref.columnVisibilityWithIconButtonTable, {
    dom: `<'row align-items-center'<'col dataTables_pager'p><'col-auto'B>><'row'<'col-12'tr>><'row'<'col-12 dataTables_pager'p>>`,
    columnDefs: [
      {targets: 0, data: 'name'},
      {targets: 1, data: 'position'},
      {targets: 2, data: 'office'},
      {targets: 3, data: 'age'},
      {targets: 4, data: 'startDate'},
      {targets: 5, data: 'salary'},
    ],
    pageLength: 3,
    buttons: {
      dom: {
        button: {
          // Disable the default button class (btn btn-secondary) to set the icon button (btn-icon).
          className: null,
        },
        buttonLiner: {
          // By default, a span element is added within the button, so disable it.
          tag: null,
        }
      },
      buttons: [
        // Button to toggle column visibility.
        {
          extend: 'colvis',
          columns: ':eq(1),:eq(2),:eq(3),:eq(4),:eq(5)',
          text: '<i class="ki-solid ki-gear fs-1"></i>',

          // Icon button style. Switch between them as you wish.
          // className: 'btn btn-sm btn-icon btn-color-primary btn-active-light-primary',
          className: 'btn btn-icon btn-color-gray-500 btn-active-color-primary',

          // Display column drop-downs inside the table container. If this is not set, the column dropdowns will overflow the table container.
          align: 'container',
        }
      ],
    },
    // Save the column visibility in the browser.
    stateSave: true,
    /* Enable/Disable saving for various datatables elements. Delete any items you do not wish to save.
        - data.columns.search: This option allows for the saving of the search applied to individual columns to be enabled or disabled.
        - data.columns.visible: This option allows for the saving of the visibility of the columns to be enabled or disabled.
        - data.length: This option allows for the saving of the page length to be enabled or disabled.
        - data.order: This option allows for the saving of the tables column sorting to be enabled or disabled.
        - data.paging: This option allows for the saving of the paging to be enabled or disabled.
        - data.scroller: This option allows for the saving of the scroller position to be enabled or disabled.
        - data.search: This option allows for the saving of the search to be enabled or disabled.
        - data.searchBuilder: This option allows for the saving of the searchBuilder state to be enabled or disabled.
        - data.searchPanes: This option allows for the saving of the searchPanes state to be enabled or-  disabled.
        - data.select: This option allows for the saving of the select state to be enabled or disabled.
    */
    stateSaveParams: (_, data) => {
      delete data.columns.search;
      // delete data.columns.visible;
      delete data.length;
      delete data.order;
      delete data.paging;
      delete data.scroller;
      delete data.search;
      delete data.searchBuilder;
      delete data.searchPanes;
      delete data.select;
    }
  });
}

// Search for elements.
const ref = components.selectRef();

// Initialize DataTable.
const columnVisibilityWithIconButtonTable = initColumnVisibilityWithIconButtonTable();
            

              import {components} from 'metronic-extension';

function initDisableFirstAjaxCallTable() {
  return new components.Datatable(ref.disableFirstAjaxCallTable, {
    firstAjax: false,
    ajax: '/api/persons/pages',
    columnDefs: [
      {targets: 0, data: 'name'},
      {targets: 1, data: 'position'},
      {targets: 2, data: 'office'},
      {targets: 3, data: 'age'},
      {targets: 4, data: 'startDate'},
      {targets: 5, data: 'salary'},
    ],
    pageLength: 3
  });
}

function initDisableFirstAjaxCallTableForm() {
  $('body').on('click', '[data-on-load-disable-first-ajax-call-table]', () => disableFirstAjaxCallTable.reload());
}

// Search for elements.
const ref = components.selectRef();

// Initialize DataTable.
const disableFirstAjaxCallTable = initDisableFirstAjaxCallTable();

// Initialize events, etc.
initDisableFirstAjaxCallTableForm();
            

              const router = require('express').Router();
const {query, validationResult} = require('express-validator');
const PersonModel = require('../../models/PersonModel');

// Get person page data.
router.get('/pages', [
  // Validate parameters.
  query('start').not().isEmpty().isInt({min: 0}),
  query('length').not().isEmpty().isInt({min: 1}),
  query('order').not().isEmpty().isIn(['name', 'position', 'office', 'age', 'startDate', 'salary']),
  query('dir').not().isEmpty().isIn(['asc', 'desc']),
  query('search.keyword').trim().optional({nullable: true, checkFalsy: true}).isLength({max: 70}),
  query('draw').not().isEmpty().isInt({min: 1}),
], async (req, res) => {
  // Check validation results.
  const result = validationResult(req);
  if (!result.isEmpty())
    // If the parameter is invalid, a 400 error is returned.
    return void res.status(400).end();

  // Get page data.
  const paginate = await PersonModel.paginate(req.query);

  // Set the received drawing count as-is in the response.
  paginate.draw = req.query.draw;
  res.json(paginate);
});

module.exports = router;
            

              const Model = require('express-sweet').database.Model;
const {merge} = require('deep-fusion');

module.exports = class extends Model {
  static get table() {
    return 'person';
  }

  static get attributes() {
    return {
      id: {
        type: this.DataTypes.INTEGER,
        primaryKey: true,
        autoIncrement: true
      },
      name: this.DataTypes.STRING,
      position: this.DataTypes.STRING,
      office: this.DataTypes.STRING,
      age: this.DataTypes.INTEGER,
      startDate: this.DataTypes.DATE,
      salary: this.DataTypes.DECIMAL(10, 2),
    };
  }

  /**
   * Get page data.
   */
  static async paginate(options) {
    // Initialize options.
    options = merge({
      start: 0,
      length: 30,
      order: 'name',
      dir: 'asc',
      search: {
        keyword: null,
      },
    }, options);

    // Filter conditions.
    const where = {};
    if (options.search.keyword)
      where.name = {[super.Op.like]: `%${options.search.keyword}%`};

    // Get page data.
    const data = await super.findAll({
      where,
      offset: parseInt(options.start, 10),
      limit: parseInt(options.length, 10),
      order: [super.literal(`${options.order} ${options.dir}`)],
      raw: true,
    });

    // Get the total number of records.
    const recordsTotal = await super.count();

    // Get the number of filtered records.
    const recordsFiltered = await super.count({where});
    return {data, recordsTotal, recordsFiltered};
  }
}