将jQuery Plugin Pagination.js与React结合使用

Question

I want to use a pagination plugin in React. The original use in jQuery:

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, 8],
    pageSize: 3,
    callback: function (data, pagination) {
        // template method of yourself
        var html = template(data);
        $("#dataContainer").html(html);
    }
});

I want to use it in React for a search function. Data source will change based on search result. Also DOM contains search result will change.

This is container of search result:

<MovieList data={this.state.searchList} handleAdd={this.addList}/>

searchList will be updated as state.

This is MovieList component:

var MovieList = React.createClass({

renderTemplate: function (data) {
    return data.map(function (movie) {
        return <Movie data={movie} onAdd={this.props.handleAdd}>
        </Movie>;
    });
},

componentDidMount: function () {
    $(ReactDOM.findDOMNode(this)).pagination({
        dataSource: this.props.data,
        pageSize: 6,
        callback: function (data, pagination) {
            // template method of yourself
            var html = this.renderTemplate(data);
            $(this.children).html(html);
        }
    }).bind(this);
},

componentWillUnmount: function () {

    $(ReactDOM.findDOMNode(this)).pagination('destroy');
},

render: function () {
    return (
        <div className={this.props.className}>
            <div className="data-container"></div>
        </div>
    );
}

});

After bind it in componentDidMount , should I use componentWillReceiveProps or other lifecycle methods to update it?

Follow question :

I'm totally new to React. I don't know how to use React library. From online resources, I found that I should install React component by npm . I never used npm. In my project, I used Django+React. Also I only use the classical method to include reference like this:

<script src={% static 'pages/js/jquery-1.11.1.min.js' %}></script>
<script src={% static 'pages/bootstrap/js/bootstrap.min.js' %}></script>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

Where should I install React library by npm install? How to use it if I don't want to change the current structure of my project?

Answer 1

First up you should try and avoid jquery within React. Please read through this article " http://tech.oyster.com/using-react-and-jquery-together/ "

Setting the state will call your render method, but the property updated by the state has to be set in the render method. Your jquery code is unaware of the updated state, a state value is nothing but a property on your Movielist function and Jquery has no way of reading it.

Secondly componentWillRecieveProps is called when props are getting updated from parent or some other component, it is used for doing validations or calculations on set before render is called.

Finally you can use https://github.com/ultimate-pagination/react-ultimate-pagination for pagination it is very flexible works with Bootstrap, MUI and few others you can write your own skin as well.

Answer 2

You can use "DataTable" javascript functionality for this problem. Please refer https://www.datatables.net/ .

In this you just need to give your table Id in below code.

$(document).ready(function(){
    $('#myTable').DataTable();
});