Simple vanilla javascript datatable

Last update: Jun 7, 2022

Overview

RdataTB

simple vanilla javascript datatable

Setup

<script src="https://cdn.jsdelivr.net/gh/Rakhmadi/RdataTB@master/dist/index.js"></script>

<script>
    let x = new RdataTB('youTableid');
</script>

Options

You can enter options in the second parameter

<script>
    let x = new RdataTB('youTableid',{
		RenderJSON:[], // Convert Json to Table html 
		ShowSearch:true, // show search field,
		ShowSelect:true, // show show select,
		ShowPaginate:true, // show paginate ,
		SelectionNumber:[5,10,20,50], //Change Option in Select
		HideColumn:[], // Hide column
		ShowHighlight:false, // show Highlight if search
	        fixedTable:true, // fixed table
                sortAnimate:true, // show animated if sorted
		ShowTfoot:false,
		ExcludeColumnExport:[] 
	});
</script>

Valid table syntax

<table id="myTable">
	<thead>
		<tr>
			<th>Head 1</th>
			<th>Head 2</th>
			<th>Head 3</th> 
			 <!-- If column contain type date add attribut "type-date" example = <th type-date >Head 3</th>  -->
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>data 1</td>
			<td>data 2</td>
			<td>data 3</td>
		</tr>
	</tbody>
</table>

Class RdataTB()

Property

Property	Descriptions
`DataTableRaw`	Get table data in json format
`HeaderDataTable`	Get all column name
`RowDataTable`	Get data in row table
`DataToRender`	Get the data displayed in the table

Methods

Name Methods	Descriptions
`DownloadCSV('FileName');`	Download table in csv format "default filename is Export"
`DownloadJSON('FileName');`	Download table in Json format "default filename is Export"
`sort('columnName');`	Sort table by column asc and desc
`nextItem();`	Get next page data
`prevItem();`	Get previous page data

Comments

How to define columns with properties for an empy table tag

Hello, is there a way to define the structure of the table with code in order to bind it with a JSON array, I mean like with the DataTable widget, discarding the use of jQuery of course, I like the fact that your widget does not require additional frameworks or CSS:

$('#datagrid').DataTable( { data: DataSet, columns: [ { title: "ID", data: "customerid" }, { title: "Compañia", data: "companyname" }, { title: "Contacto", data: "contactname" }, { title: "Teléfono", data: "phone" }, { title: "País", data: "country" } ] } );

The HTML would be like this:

Thank you, Martin

opened by mcordova1967 0
Exclude columns from export

Thank you for the table script. Please add an option to exclude columns from export. I have integrated action buttons in my last column, these are exported with.

opened by BullMedia-dev 1
Duplicate fields when performing new json request

Duplicate fields when performing new json request.

For each new request to return the list, the table fields are duplicated, we would have to see how to destroy the previous event and consider an update of the rows without duplicating the fields!

opened by wagnerfillio 0
Change header name

Can I add the header manually and load the tbody via a json object?

Turns out I loaded the json object, but the header title is the same as loaded in json.

I would like to put another name in the header.

I would also like to disable tfooter.

opened by wagnerfillio 0

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

Vanilla JavaScript tabs - tiny and simple.

Vanilla JavaScript Tabs Vanilla JavaScript Tabs - simple and awesome. — Inspired by the blazing fast, lightweight, cross-platform and crazy popular Va

Dec 22, 2022

It is a simple yet powerful to do list app in which you can add daily to-do tasks.you can edit, remove, check it to change its status to complete or not complete. it would save all the data and changes in local storage and track your daily tasks whether you have completed them or not.Built with vanilla JavaScript

To Do list - minimalist It is a simple yet powerful to do list app in which you can add daily to-do tasks. it would save all the data and changes in l

Oct 9, 2022

MenuSlider-Javascript - How to create a menu slider with vanilla javascript

MenuSlider-Javascript How to create a menu slider with vanilla javascript Instal

Feb 8, 2022

Simple fixed background parallax effect in vanilla js.

Simple Parallax Simple fixed background parallax effect in vanilla js. See demo on Codepen. JS Initialise the plugin. The first argument identifies th

Jun 27, 2022

This is a small web application I made using Vanilla Javascript. It's a text generator that cooks up classic lyrics (lorem ispum style) from the rap collective Wu Tang Clan. This was a blast to make and I hope others can get some use out of it, or at least a good laugh.

Wu Tang Lorem Ipsum Text Generator This is a small web application I made using Vanilla Javascript. It's a text generator that cooks up classic lyrics

Aug 1, 2022

BVSelect-VanillaJS - BVSelect - Vanilla Javascript Fully Customizable SelectBox

BVSelect - Vanilla JS Replaces native select elements with fully customizable dropdowns. Demo: https://bmsvieira.github.io/BVSelect-VanillaJS/ Feature

Dec 26, 2022

Ios-calculator-js - Calculator made with vanilla javascript and custom css based on the design of iOS devices.

ios-calculator-js This is a practice project in which I try to replicate iOS calculator's both logic and styling. In case you spot room for improvemen

Nov 10, 2021

Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Dec 30, 2021