Skip to content

brenthamby/parse-javascript-datatable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Parse.com Ajax Datatable

This is a simple flexible library that allows you to view and edit your parse.com data in a tabular format. You can set the table to be editable and/or deletable. For basic types the editing is very simple, you just click on the field and a little editor appears. For complex types and for large amounts of data in a single cell there are interceptor functions that allow you to handle the display of the data and the method for updating, e.g. for Date types you might intercept the up event and provide your favorite Datepicker. Here is a quick run down of the features:

  • pagable and sortable tabular interface
  • interceptor design pattern for adding custom display and update features
  • only 200 lines of code
  • relies on jquery, underscore, underscore templates and of course parse

table

This is the basic usage:

	pt = new ParseTable({
		el : $("#table"), // where to place on the page (fills space)
		parseObjName : "NAME_OF_TABLE",
		deletable : true, //  defaults to false (allows deleting if true)
		editable : true,  //  defaults to false (allows editing if true)
	...

By default it will inspect the table and present all of the columns for display and editing. You can enforce order or omit columns using:

	...
	cols : ['Street','City','State','PostalCode','Country'],

What is really powerful is the interceptors which allow you to customize the way the data is displayed and the method and UI for editing the data. For instance you may want to shorten long text entries so as not to distort the table:

	...
	displayInterceptors:{
		SOME_LONG_COLUMN : function(d){
			return d.substring(0,20)+"..."
		}
	},
 

Or present a drop down list for some other enumerated column:

	...
	editInterceptors:{
		State : function(obj){
			var target = obj.el;  // DOM ref to the cell
			var parseObj = obj.parseObj; // parse instance
			var col = obj.col;  // column name in question
			var val = target.data("rawdata"); // raw data (diff if was displayIntercepted)
			var myEdit = $("<select class='pt_edit'><option>CA<option>NY<option>VT</select>")
				.val(target.html().trim()).change(function(){
				parseObj.set(obj.col,$(this).val())
				parseObj.save()
				pt.editing=false	
				pt.render()
			})
			target.append(myEdit)
		}
	}

Authors and Contributors

@brenthamby

Support or Contact

Having trouble with Pages? Check out the documentation at http://help.github.com/pages or contact [email protected] and we’ll help you sort it out.

About

Simple and extensible datatable for use with the parse.com JS API.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published