Light

rakhmadi / rdatatb Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 2.0 800 KB

Simple vanilla javascript datatable

Home Page: https://stoic-villani-c9b3f6.netlify.app/

License: MIT License

HTML 26.93% TypeScript 34.60% JavaScript 38.47%

datatable datatables-plugin vanilla-js typescript datatables datatables-serverside bootstrap bootstrap-datatables bootstrap5

rdatatb's Introduction

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

rdatatb's People

Contributors

Stargazers

Watchers

Forkers

fernandez9954 raniaamina

rdatatb's Issues

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!

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.

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.

How to Add extra coloumn in json render

Hi thanks for providing this awesome module.
I tried to render json array, but i need to add extra coloumn with custom html in the last, is there any suggestion how to get it done with RDataTB?

Thanks

Show All

Great job! How would I show all rows? right now you can only show 5, 10, 20 or 50

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

Export CSV with Title

Hi,

The export csv need with heading. Ref enclosed screen shot

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.