Integrate Datatable with React.js

lopmonhoc.js.jsx

 /** @jsx React.DOM */

 var LopMonHoc = React.createClass({
 	getInitialState: function(){
 		return {data: []}
 	},
 	loadData: function(){
 		$.ajax({
 			url: '/daotao/lops',
 			success: function(data){
 				this.setState({data: data.lops});
 			}.bind(this)
 		})
 	},
 	componentWillMount: function(){
 		this.loadData();
 	}, 	
 	componentDidMount: function(){
 		var self = this;
 		$('#mytable').dataTable({
		  "sPaginationType": "bootstrap",
		  "bAutoWidth": false,
		  "bDestroy": true,		
		  "fnDrawCallback": function() {		  		
            	self.forceUpdate();        	
          }, 
		});
 	},
 	componentDidUpdate: function(){
 		$('#mytable').dataTable({
		  "sPaginationType": "bootstrap",
		  "bAutoWidth": false,
		  "bDestroy": true,	
		});
 	},
 	render: function(){
 		var x = this.state.data.map(function(d, index){
 			return <tr><td>{index+1}</td><td>{d.ma_lop}</td><td>{d.ten_mon_hoc}</td></tr>
 		});
		return (
			<div class="table-responsive">
				<h4>Hello</h4>
				<table class="table table-bordered" id="mytable">
					<thead>
						<tr class="success">
							<td>Stt</td>
							<td>Mã lớp</td>
							<td>Tên môn học</td>
						</tr>	
					</thead>
					<tbody>
						{x}
					</tbody>
				</table>
			</div>
		) 		
 	}
 });

Thanks, exactly what I was looking for!

In fact, where do you get the "bootstrap" pagination style from? I guess this is something you implemented yourself?

No, you just use it because it's built in datatables.

Here is a quick barebones sample I did in jsfiddle: http://jsfiddle.net/NXCyC/130/

keywords: React.js + jQuery.DataTable

hi, if the data from server, how do i use react

@binlaniua: Use jQuery Ajax to fetch initial data like above.

@sam3k In the example from http://jsfiddle.net/NXCyC/130/ what is the purpose of call-in forceUpdate? forceUpdate is only needed when you use source of data other than this.props or this.state in the render function, in the current example that is not necessary..

Awesome!

I would also like to know, why there is forceUpdate. Btw I think, it isn't good idea to use ReactJs with DataTables https://discuss.reactjs.org/t/react-js-crud-using-datatables/110

For the rendered JSX, shouldn't all of the "class" attributes be "className"?

@AndrejGajdos: I think DataTable is suitable for only View/Filtering/Pagination only onl client side without hitting server. But at least, it works!
You're right about the forceUpdate() method. It's not nessessary in this case. But if you mutate the state, then it's nessessary to redraw DataTable in the callback.

@KeynnyMonster : Yes, i will update the gist since this gist is from the first release of React.js.

Why do you use the bDestroy? That could lead to a lot of performance issues.

@jhyland87: i just try and fail till success.
Please try other options, too. 💃

How does it work though, when you have a component, that in its render from props puts a plain HTML table on a page.... then componentDidMount makes it a datatable.

Okay, all is good.

THEN, you have a prop change from above, that force render to run again. the "datatable" is gone/ruined/conflicts w/ react at that point.. and then in componentDidUpdate you can't "re-datatable"

At least for me, this never works.

I can use react + datatables if I perfectly render on exactly the first time.. but if one more prop change comes frmo about (new ajax call data from parent container/smart component) then its hosed.

@rstunder: you are right, I have the same experience with datatable and react

@AndrejGajdos @rstunder

I had a similar experience which brought me here.

Not the best solution, but in a pinch in my routine to reload my data I've use the table.destroy() function prior to setting the state then recreated the datatable after that returns. In my case the data doesn't change that often and there is no polling from the browser.

loadItemsFromServer: function() {
    $.ajax({
      url: this.props.l_url + this.state.session_id,
      dataType: "json",
      type: "POST",
      cache: false,
      success: function(data) {
        $("#dataTables-example").DataTable().destroy();
        this.setState({data: data});
    $("#dataTables-example").dataTable();
     }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  };

I have to say, this is not a good idea.If you don't want to buy editors, datatables would be a nightmare

There are performance issues with some use cases, but jQuery DataTables are the most full-featured tables...

React jQuery DataTables

In my case, when there is update for each row, the server return another list of rows, so i have to use forceUpdate() .
The performance, is really bad, also.

didnt work for me, React Js not render the rows created with ajax result. If eliminate the contents of thead and tfooter, the rows are displayed, but other elements disappear (like pagination controls and search control)

Why not use react-data-grid instead? React jQuery DataTables is bit heavy to me

if you dont worry about delay, you can set time out for $(..) .datatable({..}) about 25ms-50ms in componentDidUpdate(). It's worked for me, easily.

React jQuery DataTables is a jquery component, so you will loose react context, and have issues using React components within the cells (you might need to call ReactDOM.render) - a better alternative would be to use a pure React DataTable - here is an example: http://www.reactdatagrid.com/

serverSide: true, is not working with this way... how can i do it ?

Data is loading in its place but problem is that is still get no data available at the bottom and searching sorting pagination does not work at all

If anyone is having a problem, You should implement render() + shouldComponentUpdate() + componentDidUpdate() + componentWillMount()
componentWillMount() : for Network/API stuff
componentDidUpdate() : You init the DataTable $('#YourTable').DataTable();
shouldComponentUpdate() : return True; (Default)
render() : Render your elements like done above.

Here is a Lifecycle when you execute the App.JS :

WillMount
Render
DidMount
Render
DidUpate

Hi All

I am using jquery DataTable in React Js and I have written specific code for the rendering of a cell. My code is

var handleView = this.handleClick;
x.mRender = function(obj, data, type, row) {
var i1 = $("");
var i2 = $("");
i1.attr("onclick","handleView();");
i2.attr("onclick","handleView();");
var cellContent = $("

").append(i1).append(i2);

			    	return cellContent.prop('outerHTML');
		 	 
			};

I am not able to trigger onClick on i1 / i2.
It is showing that handleView() is not defined.

Could anyone help me out. I have tried many ways but its not finding that funtion

What about Functional Components