Nybble Processing Mainframe
    Wondering what’s next for npm?Check out our public roadmap! »

    bvtnet-items-provider

    1.0.4 • Public • Published

    Build Status

    bvtnet-items-provider

    datatables.net ajax items provider for bootstrap-vue b-table

    Demo https://niiknow.github.io/bvtnet-items-provider/

    The goal if this library is to connect the datatables.net server-side REST endpoint with b-table of the bootstrap-vue as described here: https://bootstrap-vue.js.org/docs/components/table/#using-items-provider-functions and https://datatables.net/manual/server-side

    <b-table 
      :items="ip.items"
      :fields="ip.fields"
      :busy="ip.busy"
      :current-page="ip.state.currentPage"
      :per-page="ip.state.perPage"
      :filter="ip.state.filter"
      :filter-ignored-fields="ip.state.filterIgnoredFields"
      :filter-included-fields="ip.state.filterIncludedFields"
    />
    <div 
      v-if="ip.totalRows > 0"
      class="row"
    >
      <b-pagination
        v-model="ip.state.currentPage"
        :per-page="ip.state.perPage"
        :total-rows="ip.totalRows"
      />
    </div>
    import Vue from 'vue'
    import BootstrapVue from 'bootstrap-vue'
    import axios from 'axios'
    
    Vue.use(BootstrapVue)
    
    import ItemsProvider from 'bvtnet-items-provider'
    
    export default {
      name: 'App',
      data() {
        const fields = [ ... your fields here ... ]
        const ip = new ItemsProvider({axios: axios, fields: fields})
    
        return {
          ip: ip
        }
      }
    }

    NOTE

    This plugin support most server-side features except for:

    1. Per column filtering - https://github.com/bootstrap-vue/bootstrap-vue/issues/1970
    2. Multi-column sorting - https://github.com/bootstrap-vue/bootstrap-vue/issues/2068

    This is because b-table does not currently natively support it. Future work is in progress, see b-table issue links.

    Although this Component was written for datatables.net and b-table, it is a completely independent library written based off API contracts.

    State Object

    Below are fields on the state object, which are useful for binding to various components in Vue. If saveStateId is provided, then this object get saved after successful data returned from ajax called and reload right after ItemsProvider construction.

    [x] currentPage - save the current page

    [x] perPage - save the per page selection

    [x] filter - save the search filter

    [x] filterIgnoredFields - array of ignored fields - see b-table

    [x] filterIncludedFields - array of included fields - see b-table

    [x] searchFields - per-column field search/filter

    [x] extraQuery - additional query parameters

    [x] sortFields - per-column field sorting

    RELEASE

    1.0.0 - Future release with new features. Big change in this release is the moving several bindable properties perPage, currentPage, filter, filterIgnoredFields, filterIncludedFields to provider.state object. This allow for logical separation between what are being saved to the localStorage

    • custom per-column filtering provide options.searchFields as key-value object
    • additional options.extraQuery as key-value object - allow for custom advance search, such as range search on date or numeric column
    • custom multi-column sorting with options.sortFields as key-value object
    • introducing saveStateId property for saving previous state and query on localStorage.

    0.9.9 - remove multi-parameters constructor for single object parameter, update doc to prep for version 1.0.0 release.

    MIT

    Install

    npm i bvtnet-items-provider

    DownloadsWeekly Downloads

    182

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    65.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar