jQuery addClass example

Change class name on click in jQuery

by jibz31

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h2">Job Step Execution</h1>
            </div>
            <div>
<table id="jobStepExecutionTab" class="display table table-striped table-bordered nowrap" style="width:100%">
    <thead>
    <tr>
        <th>stepExecutionId</th>
        <th>Version</th>
        <th>stepName</th>
        <th>jobExecutionId</th>
        <th>startTime</th>
        <th>endTime</th>
        <th>status</th>
        <th>commitCount</th>
        <th>readCount</th>
        <th>filterCount</th>
        <th>writeCount</th>
        <th>readSkipCount</th>
        <th>writeSkipCount</th>
        <th>processSkipCount</th>
        <th>rollbackCount</th>
        <th>exitCode</th>
        <th class="exitMessage">exitMessage</th>
        <th>lastUpdated</th>
    </tr>
    </thead>
</table>
</div>
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 id="modalTitle"></h3>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <div class="modal-body">
                            <p class="modalContent">

                            </p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                       ...

CSS

body {
  background: white;
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

$(document).ready(function () {
    $('#jobInstanceTab').DataTable({
        processing: true,
        serverSide: false,
        paging: true,
        ajax: {url: 'http://localhost:8080/jobinstance', dataSrc: ""},
        pageLength: 30,
        columns: [
            {"data": "jobInstanceId"},
            {"data": "version"},
            {"data": "jobName"},
            {"data": "jobKey"}
        ]
    });


    /*Table JobStepExecution*/
    $('#jobExecutionTab').DataTable({
        processing: true,
        serverSide: false,
        paging: true,
        scrollX: true,
        ajax: {url: 'http://localhost:8080/jobexec', dataSrc: ""},
        pageLength: 30,
        columns: [
            {"data": "jobExecutionId"},
            {"data": "version"},
            {"data": "createTime"},
            {"data": "startTime"},
            {"data": "endTime"},
            {"data": "status"},
            {"data": "exitCode"},
            {"data": "exitMessage"},
            {"data": "lastUpdated"},
            {"data": "jobConfigurationLocation"},
            {"data": "jobInstanceId"},
        ]
    });

    /*
    Specifying datasource for testing purpose:
     */
    let dataSet = [
        {
            "stepExecutionId": 13487,
            "version": 2,
            "stepName": "objectXmlFileSenderStep",
            "jobExecutionId": null,
            "startTime": "2019-12-04T14:55:51.960+0000",
            "endTime": "2019-12-04T14:55:53.134+0000",
            "status": "FAILED",
            "commitCount": 0,
            "readCount": 1,
            "filterCount": 0,
            "writeCount": 0,
            "readSkipCount": 0,
            "writeSkipCount": 0,
            "processSkipCount": 0,
            "rollbackCount": 2,
            "exitCode": "FAILED",
            "exitMessage": "org.springframework.retry.ExhaustedRetryException: Retry exhausted after last attempt in recovery path, but exception is not skippable.; ",
            "lastUpdated":...