How do i use this jquery script on a wordpress site?

Its pretty simple.

First you have to add a function in your themes funcition.php file to register and enqueue your scripts in head using wp_enqueue_scripts hook.

// Register and enqueue all scripts in head
    function custom_scripts() {

        wp_register_script( 'script_googleapis', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, false, false );
        wp_enqueue_script( 'script_googleapis' );

        wp_register_script( 'script_listjs', 'http://listjs.com/no-cdn/list.js', false, false, false );
        wp_enqueue_script( 'script_listjs' );

        wp_register_script( 'script_pagination', 'http://listjs.com/no-cdn/list.pagination.js', false, false, false );
        wp_enqueue_script( 'script_pagination' );

    }

    // Hook into the 'wp_enqueue_scripts' action
    add_action( 'wp_enqueue_scripts', 'custom_scripts' );  

Then you can call your function to initiate your script in footer using wp_footer hook as following;

// Add this in function.php as well

    function call_script_in_footer(){
    ?>
    <script>
    var monkeyList = new List('test-list', {
      valueNames: ['name'],
      page: 3,
      plugins: [ ListPagination({}) ] 
    });
    </script>
    <?php
    }

    add_action( 'wp_footer', 'call_script_in_footer' );

And thats it. Now you can use your HTML and CSS in what ever template you want.