JSFiddle - React, Tailwind, and code Playground

by Menuka Ishan

HTML

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<html>

<head>
<fmt:setLocale value="en"/>
<fmt:bundle basename="Language">
    <title><fmt:message key="LoadSearch.title"/></title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>

    <script src="js/LoadSearch.js"></script>
    <script src="js/UpdateUser.js"></script>
    <script>
        $(document).ready(function(){
            $('#table').bootstrapTable('hideColumn', 'operate');

        });
    </script>

</head>
<body>
<%@include file="top.jsp" %>
<center>
    <input type="text" id="search">

    <button id="bn1" class="btn btn-primary btn-large"><i class="icon-white icon-zoom-in"></i><fmt:message key="LoadSearch.Search"/>Search</button>
    <br>
    <br>
</center>
<div class="col-md-12">
    <table id="table"></table>
</div>

<%-- Delete User model--%>
<div class="modal fade" id="deleteUser" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"...

JavaScript

//Bootstrap table configurations

$(document).ready(function () {
    $("#country").change(function () {
        var country = $("#country").val();
        //alert(country);
        $.ajax({

            // The URL for the request
            url: "CitySender",

            // The data to send (will be converted to a query string)
            data: {
                country: country
            },

            // Whether this is a POST or GET request
            type: "GET",

            // The type of data we expect back
            dataType: "json",
            success: function (data2) {
                $("#states").empty();
                for (var i = 0; i < data2.length; i++) {
                    var obj = data2[i];

                    $("#states").append('<option value=' + obj.city_id + '>' + obj.city + '</option>');
                }


            },
            error: function (data) {
                console.log(data);
            }
        })
    });
});



$(document).ready(function () {

    $.ajax({

        // The URL for the request
        url: "AllData",

        // Whether this is a POST or GET request
        type: "GET",

        // The type of data we expect back
        dataType: "json",
        success: function (data2) {

            $('#table').bootstrapTable({
                method: 'get',
                data: data2,
                striped: true,
                pagination: true,
                pageSize: 10,
                pageList: [10, 25, 50, 100, 200],
                search: false,
                showColumns: false,
                showRefresh: false,
                height: 610,
                minimumCountColumns: 2,
                columns: [{
                    field: 'firstName',
                    title: 'First Name',
                    align: 'left',
                    //visible: false,
                    valign: 'bottom',
                    sortable: true
                }, {
                    field:...