Skip to content

vipinc007/SimpleVuejsPaginator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

Simple Vuejs Paginator

Hello, This is a simple vue.js pagination component

Usage :

  • Download this component.

  • Put is inside anywhere in your project folder.

  • Import it in your component

    import tobPaginator from '@/<path>/tobPaginator.vue';
    
    export default {
    name: "LogActivity",
    components :{
    	tobPaginator 
    },
    
    data:{ Log : this.logitems}
    
  • Usage

    <component :is="tobPaginator_component" :key="Log" ref="tobPaginator_component" 
            :dataList="Log" :recordsPerPage="10" :curPageNumber="1" :methodToCallBack="getPaginatedLog">
            <div class="table-responsive" style="height: 30rem">
                
                <table id="logactivity_data" class="table table-bordered table-hover table-outline table-vcenter text-nowrap card-table">
                  <thead>
                    <tr>
                      
                      <th width='15%'>Name</th>
                      <th width='60%'>Address</th>
                      
                      <th width='15%'>Age</th>
                      <th width='10%'>Gender</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="item in paginatedLogData">
                      
                      <td>
                        {{item.Name}} 
                        
                      </td>
                      <td>
                        {{item.Address}} 
                       
                      </td>
                      <td>
                        {{item.Age}}
                        
                      </td>
                      <td>
                        {{item.Gender}}
                        
                      </td>
                  
                    </tr>
                </table>
                
                
           
                <!-- <span v-html="pg.pagelinks()"></span> -->
              </div>
            </component>
    
    methods: {
    
    getPaginatedLog(items, itemsFiltered)
    {
      this.paginatedLogData = items;
    }
    }
    

Releases

No releases published

Packages

No packages published

Languages