Quickstart¶

Requirements¶

Usage¶

Initialize the plugin by referencing the necessary files

<link href="css/jquery.mSelect.min.css" rel="stylesheet">
<script src="js/jquery.mSelect.min.js"></script>

Get Started¶

Call the mSelect via javascript

$('#country_id').mSelect({
    url: 'ajax/countries.php'
});

The HTML code should be something like

<div class="col-md-4">
    <label>Country</label><br>
    <select id="country_id" multiple="multiple" class="mSelect"></select>
</div>

The PHP Server Side code is something like

<?php
    require('../config/config.php');
    require('../classes/Datatables.php' );

    // DB table to use
    $table = 'countries';

    // Table's primary key
    $primaryKey = 'id';

    // Array of table columns
    $columns = array(
        array('db' => 'id',   'dt' => 0),
        array('db' => 'name', 'dt' => 1)
    );

    // SQL server connection information
    $sql_details = array(
        'user' => $db_user,
        'pass' => $db_pass,
        'db'   => $db_name,
        'host' => $db_host,
    );

    echo json_encode(
        Datatables::simple($_GET, $sql_details, $table, $primaryKey, $columns)
    );
?>

A Typical Example¶

Warning

In the Example below you may need to enable more extensions for the Datatable as needed.

<!DOCTYPE html>
<html>
<head>
    <title>mSelect | Example</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet">
    <!-- Datatables -->
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/plug-ins/1.10.12/features/searchHighlight/dataTables.searchHighlight.css" rel="stylesheet">
    <link href="public/plugins/datatables/checkboxes/1.2.11/dataTables.checkboxes.css" rel="stylesheet">
    <!-- mSelect -->
    <link href="public/plugins/mSelect/2.0.0/jquery.mSelect.css" rel="stylesheet">
    <!-- custom CSS -->
    <link href="public/css/yourcustomstyle.css" rel="stylesheet">
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <label>Country</label><br>
                <select id="country_id" class="mSelect" multiple="multiple"></select>
            </div>
        </div>
    </div>

    <!-- JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
    <!-- Datatables -->
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/plug-ins/1.10.12/features/searchHighlight/dataTables.searchHighlight.min.js"></script>
    <script src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>
    <script src="public/plugins/datatables/checkboxes/1.2.11/dataTables.checkboxes.min.js"></script>
    <!-- mSelect -->
    <script src="public/plugins/mSelect/2.0.0/jquery.mSelect.js"></script>
    <!-- Custom JS -->
    <script>
        $(function () {
            $('#country_id').mSelect({
                url: 'ajax/example1.php'
            });
        });
    </script>
</body>
</html>

Important

Please check the Datatable Server side scripts usage for more details.