Giter Club home page Giter Club logo

bigtable's Introduction

bigTable

A lightweight jQuery script with delusions of grandeur which converts a static HTML table into an AJAX table with minimal effort.

bigTable can ajaxify a plain HTML table by passing arguments via an AJAX POST to the backend which handles the heavy lifting. bigTable sets up sortable headers and connects the pager links by adding handlers which intercept the events necessry to load the table data.

All the processing and rendering is handled on the backend, even the pagination widget! The AJAX calls simply place the rendered HTML wherever you want it to go.

It does not 'cache' the received html rows, every action will result in a call to the server to grab the html for display. There are historic reasons the code is setup this way, hence my need to keep the whole thing as close to plain HTML as possible.

Currently there is support for a Bootstrap3 pager, an info box to show number of records returned and total results etc., and the tbody which is where it inserts the raw html passed back from the server.

When the user clicks a sortable header, navigates a page or submits the form bigTable will intercept, create a url with the search parameters and pass it back to the server. The server should generate three views in response, the info, the pager and the table body. It should return those wrapped in JSON for bigTable to paste into the page.

Requires jQuery > 1.11 and FontAwesome for the table header icons, these can be replaced easily in the CSS file

First draft, it's my first jQuery plugin, a little unorthodox but it works for me!

Setup

Requires jQuery > 1.11. Optionally requires FontAwesome and Bootstrap3 to make it pretty

In your head place the link to the stylesheet

<link media="all" type="text/css" rel="stylesheet" href="/vendor/bigtable/bigtable.css">

Ideally before the closing tag place the link to the script

<script src="/vendor/bigtable/bigtable.js"></script>

Usage

Add this to your page in your script section:

$(function($){
	$(".bigTable").bigTable();
});

Add the table like so

<!-- bigTable will use the action and method to fetch your data -->
<form action="/users" method="post">
	
	<table class="bigTable table table-condensed table-hover">
		<thead>
			<tr>
				<th>User name</th>
				<!-- Do not sort the column below -->
				<th data-sort="false">Roles</th>
				<th>Email</th>
				<!-- Use the data-name attribute if your Header does not match the fieldname -->
				<th data-name="updated_at">Last login</th>
				<th>Status</th>
			</tr>
		</thead>
		<tbody>
			<!-- table rows will be placed here -->
		</tbody>
	</table>
	
	<!-- pager html code will be inserted into the div below -->
	<div class="st-pager pull-right"></div>

</form>

bigTable will look for your table header row (it only supports one row!) and will add a class .bt-sortable to each that does not have an attribute of data-sort="false"

If your table header labels do not match your schema, use the data-name attribute as in the example to override the text.

Very basic example of the server code

<?php

# Laravel 

class UsersController {

  public function getIndex() {
    return View::make('users/index');
  }
  
  public function postIndex() {
    
    # get models using index scope which creates our db query 
    $items = User::index()->paginate(Input::get('size'));
    
    $response = [
      'status' => 'ok',
      'view' => [
        'info' => null,
        'pager' => null,
        'tbody' => null,
      ],
    ];
    
    # render user rows to view
    foreach ($items as $item) {
      $response['view']['tbody'].= View::make('users/index-table-row', ['user'=>$item])->render();
    }
    
    # add table summary info
    $response['view']['info'] = sprintf('Showing %d-%d of $d', $items->getFrom(), $items->getTo(), $items->getTotal()); 
    
    # add pager, must use trim() with Laravel links() method
    $response['view']['pager'] = trim($items->links());
  
    # return as JSON
    return Response::json($response, 200);
  
  }

}

I have two view files, one sets up the whole index page, the other is a partial view just containing the table row including the tags.

Todo

Add support for dropping columns at lower resolutions to make it more 'responsive'

bigtable's People

Contributors

dijitaltrix avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.