Theme-Logo
    • Notifications
    • Generic placeholder image
      John Doe

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Joseph William

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
    • Generic placeholder image
      Sara Soudein

      Lorem ipsum dolor sit amet, consectetuer elit.

      30 minutes ago
  • User-Profile-ImageJohn Doe
    • Settings
    • Profile
    • My Messages
    • Lock Screen
    • Logout
Generic placeholder image
Josephin Doe
Generic placeholder image
Lary Doe
Generic placeholder image
Alice
Generic placeholder image
Alia
Generic placeholder image
Suzen
Josephin Doe
Generic placeholder image

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

Generic placeholder image
User-Profile-Image
John Doe
  • View ProfileSettingsLogout
Navigation
  • DDashboard
    • Default
    • Ecommerce
    • CRM
    • AnalyticsNEW
    • Project
  • PPage layoutsNEW
    • Vertical
      • Static Layout
      • Header Fixed
      • Compact
      • Sidebar Fixed
    • Horizontal
      • Static Layout
      • Fixed layout
      • Static With Icon
      • Fixed With Icon
    • Bottom Menu
    • Box Layout
    • RTL
  • NNavigation
  • WWidget100+
    • Statistic
    • Data
    • Chart Widget
    • Advance Widgets25+
UI Element
  • BCBasic
    • Alert
    • Breadcrumbs
    • Button
    • Box-Shadow
    • Accordion
    • Generic Class
    • Tabs
    • Color
    • Label Badge
    • Progress Bar
    • Pre-Loader
    • List
    • Tooltip And Popover
    • Typography
    • Other
  • ACAdvance
    • Draggable
    • Grid Stack
    • Light Box
    • Modal
    • Notifications
    • PNOTIFYNEW
    • Rating
    • Range Slider
    • Slider
    • Syntax Highlighter
    • Tour
    • Tree View
    • Nestable
    • Toolbar
    • X-Editable
  • ECExtra
    • Session Timeout
    • Session Idle Timeout
    • Offline
  • AAnimations
  • SSticky NotesHOT
  • IIcons
    • Font Awesome
    • Themify
    • Simple Line Icon
    • Ion Icon
    • Material Design
    • Ico Fonts
    • Weather Icon
    • Typicons
    • Flags
Forms
  • FCForm
    • Components
    • Add-On
    • Advance
    • Validation
  • FPForm PickerNEW
  • FSForm Select
  • FMForm Masking
  • FForm Wizard
  • RReady To UseHOT
    • Cloned Elements Form
    • Currency Form
    • Booking Form
    • Booking Multi Steps
    • Comment Form
    • Contact Form
    • Job Application Form
    • JS Addition Form
    • Login Form
    • Popup Modal Form
    • Registration Form
    • Review Form
    • Subscribe Form
    • Suggestion Form
    • Tabs Form
Tables
  • BBootstrap Table
    • Basic Table
    • Sizing Table
    • Border Table
    • Styling Table
  • DTData Table
    • Basic Initialization
    • Advance Initialization
    • Styling
    • API
    • Ajax
    • Server Side
    • Plug-In
    • Data Sources
  • DDT Extensions
    • AutoFill
    • Button
      • Basic Button
      • Data Export
    • Col Reorder
    • Fixed Columns
    • Fixed Header
    • Key Table
    • Responsive
    • Row Reorder
    • Scroller
    • Select Table
  • FFooTable
  • HTHandson Table
    • Appearance
    • Data Operation
    • Rows Columns
    • Columns Only
    • Cell Features
    • Cell Types
    • Integrations
    • Rows Only
    • Utilities
  • EEditable Table
Chart And Maps
  • CCharts
    • Google Chart
    • Echarts
    • ChartJs
    • List Chart
    • Float Chart
    • Knob chart
    • Morris Chart
    • Nvd3 Chart
    • Peity Chart
    • Radial Chart
    • Rickshaw Chart
    • Sparkline Chart
    • C3 Chart
  • MMaps
    • Google Maps
    • Vector Maps
    • Google Map Search API
    • Location
  • LPLanding Page
Pages
  • AAuthentication
    • Login
      • Simple
      • Header & Footer
      • Social
      • Social With Header & Footer
    • Registration
      • Simple
      • Header & Footer
      • Social
      • Social With Header & Footer
    • Multi Step Registration
    • Forgot Password
    • Lock Screen
    • Modal
  • MMaintenance
    • Error
    • Comming Soon
    • Offline UI
  • UPUser Profile
    • Timeline
    • Timeline Social
    • User Profile
    • User Card
  • EE-CommerceNEW
    • Product
    • Product List
    • Product Edit
    • Product Detail
    • Product Card
    • Credit Card Form
  • EEmail
    • Compose Email
    • Inbox
    • Read Mail
    • Email Template
      • Welcome Email
      • Reset Password
      • Newsletter Email
      • App Launch
      • Activation Code
App
  • SSocial
    • Wall
    • Messages
  • TTask
    • Task List
    • Task Board
    • Task Detail
    • Issue List
  • TTo-Do
    • To-Do
    • Notes
  • GGallery
    • Gallery-Grid
    • Masonry Gallery
    • Advance Gallery
  • SSearch
    • Simple Search
    • Grouping Search
  • JSJob SearchNEW
    • Card View
    • Job Detailed
    • Job Find
    • Job Panel View
Extension
  • EEditor
    • CK-Editor
    • WYSIWYG Editor
    • Ace Editor
    • Long Press Editor
  • IInvoice
    • Invoice
    • Invoice Summary
    • Invoice List
  • ECEvent Calendar
    • Full Calendar
    • CLNDERNEW
  • ICImage Cropper
  • FUFile Upload
  • CLChange Loges1.0
Other
  • MMenu Levels
    • Menu Level 2.1
    • Menu Level 2.2
      • Menu Level 3.1
    • Menu Level 2.3
  • DDisabled Menu
  • SSample Page
Support
  • DDocumentation
  • SINeed Support ?
Data Operations

Sorting, Paginating & Searching

  • Handson Table
  • Data Operations
Sorting
If you want to sort data in your data source array, you can simply invoke an Array.prototype.sort() function and call the render() function to refresh the table. You don't need any plugin for this. However, this operation alters the structure of the data source, and in many cases you want to leave the data source intact, while displaying its content in a specified order.Here's where column sorting plugin comes in handy.Column sorting plugin works as a proxy between the data source and the Handson table rendering module. It can map indices of displayed rows (called logical indices) to the indices of corresponding rows in data source (called physical indices) and vice versa. This way you can alter the order of rows which are being presented to user, without changing the data source internal structure.
Paginating
Add pages to your table.
  • 1
  • 2
  • 3
  • 4
  • 5
Searching
The search plugin provides an easy interface to search data across Handson table.You should first enable the plugin by setting the search option to search. When enabled, searchPlugin exposes a new method query(queryStr), where queryStr is a string to find within the table. By default, the search is case insensitive.query(queryStr, [callback], [queryMethod]) method does 2 things. First of all, it returns an array of search results. Every element is an objects containing 3 properties:
  1. row – index of the row where the value has been found
  2. col – index of the column where the value has been found
  3. data – the value that has been found
The second thing the query does is set the isSearchResult property for each cell. If a cell is in search results, then its isSearchResult is set to true, otherwise the property is set to false.