Skip to content

Instantly share code, notes, and snippets.

@pedroresende
Created May 17, 2016 13:15
Show Gist options
  • Save pedroresende/4cdc5c25931396a22c67e55be8e9a729 to your computer and use it in GitHub Desktop.
Save pedroresende/4cdc5c25931396a22c67e55be8e9a729 to your computer and use it in GitHub Desktop.
var Content = React.createClass({
render: function() {
var view = "/projects/view/" + this.props.content.id;
var edit = "/projects/edit/" + this.props.content.id;
var remove = "/projects/delete/" + this.props.content.id;
return (
<tr role="row" className="even">
<td className="sorting_1"><a href={ edit }>{ this.props.content.id }</a></td>
<td>{this.props.content.client}</td>
<td>{this.props.content.name}</td>
<td>{this.props.content.area}</td>
<td>{this.props.content.code}</td>
<td>
<div className="btn-group">
<button type="button" className="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul className="dropdown-menu">
<li><a href={ edit }>Edit</a></li>
<li role="separator" className="divider"></li>
<li><a href={ remove }>Remove</a></li>
</ul>
</div>
</td>
</tr>
);
}
});
var ListContent = React.createClass({
render: function() {
var Contents = this.props.data.map(function(content) {
return (
<Content content={content} key={content.id}>
{content.name}
</Content>
);
});
return (
<tbody>
{Contents}
</tbody>
);
}
});
var ListUsers = React.createClass({
getInitialState: function () {
return {
data: [],
contentState: "1"
};
},
componentWillMount: function () {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(data, status, err) {
console.log(this.props.url, status, err.toString());
}.bind(this)
});
},
componentDidUpdate: function () {
$('#list_users_table').DataTable( {
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"sDom": 'lfrtip'
});
},
render: function() {
return (
<div className="row">
<div className="col-xs-12">
<div className="box">
<div className="box-body">
<div id="example2_wrapper" className="dataTables_wrapper form-inline dt-bootstrap">
<div className="row">
<div className="col-sm-6"></div>
<div className="col-sm-6"></div>
</div>
<div className="row">
<div className="col-sm-12">
<table id="list_users_table" className="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
<thead>
<tr role="row">
<th className="sorting_asc" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-sort="ascending" aria-label="Project ID">Project ID</th>
<th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Client">Client</th>
<th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Project Name">Project Name</th>
<th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Project Area">Project Area</th>
<th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Project Code">Project Code</th>
<th className="sorting" tabIndex="0" aria-controls="example2" rowSpan="1" colSpan="1" aria-label="Options">Options</th>
</tr>
</thead>
<ListContent data={this.state.data} />
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<ListUsers url='/projects/list'/>,
document.getElementById('list_projects')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment