i have used datatables.net ;ibrary for Paging . i want to delete records by asking Yes no . How ? .

Prabodh

//--dropwon load, edit

import React from "react";
import { Table, Button } from "react-bootstrap";
import styled from "styled-components";
import { Breadcrumb, Loader, SelectBox } from "../../components";
import moment from "moment";
import { BASE_URL } from "../../store/constant";
import { Link } from 'react-router-dom';
import Modal from 'react-bootstrap/Modal';
import { toast } from "react-toastify";

import Axios from 'axios';
import map from 'lodash/map'

import $ from "jquery";
window.jQuery = $;
window.$ = $;
global.jQuery = $;

$.DataTable = require("datatables.net-bs");
require("jszip");
require("pdfmake/build/pdfmake.js");
require("pdfmake/build/vfs_fonts.js");
require("datatables.net-autofill");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-keytable");
require("datatables.net-responsive-bs");
require("datatables.net-rowgroup");
require("datatables.net-scroller");

const initTale = data => {
$("#projectInfoTable").DataTable({
// data: data,
ordering: false,
pageLength: 20,
lengthChange: false,
processing: true,
serverSide: true,
bFilter: false,
// pageNo:1,
ajax: (e, fnCallbackDataTable, settings) => {
const page = e.start / e.length + 1;
console.log('page--->?', { e, fnCallbackDataTable, settings })
$.getJSON(${BASE_URL}/constutiency/GetConstutiency_Paging?pageNo=${page}, function ({ totalCount, data }) {

    fnCallbackDataTable({
      data,
      recordsTotal: totalCount,
      recordsFiltered: totalCount
    });
  });
},
deferLoading: 20,
columns: [
  {
    data: "id",
    render: function (data, type, row, meta) {
      return meta.row + 1 + meta.settings.oAjaxData.start;
    }
  },
  {
    data: "statename",
    render: function (data, type, row) {
      return data;
    }
  },
  {
    data: "ConstutiencyName",
    render: function (data, type, row) {
      return data;
    }
  },
  {
    data: "ConstutiencyNo",
    render: function (data, type, row) {
      return data;
    }
  },
  {
    data: "NameofShiftingMp",
    render: function (data, type, row) {
      return data;
    }
  },
  {
    data: "ActiveFlag",
    render: function (data, type, row) {
      return data === 1 ? 'Active' : "InActive"
    }
  },
  {
    data: "ConstutiencyId",
    render: function (data, type, row, meta) {
      return `<a href='/master/constutiency/${data}'><i title='Edit / Update' class="text-c-orange feather icon-edit-1"/></a>`;
    },

  },
  // {
  //   data: "ConstutiencyId",
  //   render: function (data, type, row, meta) {
  //     console.log(data, type, row, meta)
  //     return `<Button size="sm" variant="danger" onClick={self.handleShow(1).bind(self, row)} >Delete</Button>`;


  //   },
  // },
  {
    data: "ConstutiencyId",
    render: function (data, type, row, meta) {
      console.log(data, type, row, meta)

      return `<Button size="sm" variant="danger" onClick={self.handleShow(1).bind(self, row)} >Delete</Button>`;
    },
  },
],
responsive: {
  responsive: {
    details: {
      display: $.fn.dataTable.Responsive.display.childRowImmediate,
      type: ""
    }
  }
}

});
};

const Wrapper = styled.div position: relative; & #projectInfoTable_wrapper { background: #fff; padding-top: 15px; & #projectInfoTable_filter { width: 100%; & input[type="search"] { padding: 5px; } & * { width: 100%; } } & .col-sm-12 { padding-right: 0px; padding-left: 0px; } } ;

class ConstutiencyList extends React.Component {
constructor(props) {
super(props)
this.state = {
isLoading: false,
statesList: []
};
}

componentDidMount = async () => {
initTale();
// this.bindData();
$("#projectInfoTable")
.DataTable(

  )
  .ajax.reload();

  const {data} = await Axios.get(`${BASE_URL}/states`)
  this.setState({statesList:data, isLoadingState:false})

};

handleShow = (item) => {
this.setState({ show: true ,id:item});
};

handleClose = () => {
this.setState({ show: false });
};

handleDelete=(item) =>
{
alert();
const id = this.state.id;
Axios.delete(${BASE_URL}/constutiency/DeleteConstutiencyData/ + id).then(
(result) => {
// this.bindData();
//alert('Deleted');

    toast.success('Deleted Successfully.', {
      position: toast.POSITION.TOP_RIGHT
    });

  }
)
this.setState({ show: false });

}

render() {
const { isLoading } = this.state;
if (isLoading) {
return <Loader />;
}
return (

  <Wrapper>
    <Modal show={this.state.show} onHide={this.handleClose}>
      <Modal.Header closeButton>
        <Modal.Title>Confirm Message</Modal.Title>
      </Modal.Header>
      <Modal.Body><h4>Do you really want to delete?</h4></Modal.Body>
      <Modal.Footer>
        <Button variant="danger" onClick={this.handleClose}>
          Cancel
  </Button>
        <Button variant="primary" onClick={this.handleDelete}>
          Yes
  </Button>
      </Modal.Footer>
    </Modal>

    <Breadcrumb
      anyComponent={
        <>
         <SelectBox 
           placeholder='Select State..'
           options={map(this.state.statesList, o=> ({label:o.statename, value:o.statecode}))}
           style={{margin:'1px 15px 0px 0px', width: 200,}}       
           onChange={this.handleChange}            
           />
          <Link to='/master/constAddUpdate'>
            <Button size={'sm'}><i className="feather icon-plus-circle"></i>Create</Button>
          </Link>
        </>
      }
    />

    <Table
      ref="tbl"
      striped
      hover
      bordered
      responsive
      className="table table-condensed bg-c-white"
      id="projectInfoTable"
    >
      <thead
        className="text-white text-center"
        style={{ background: "#002b49" }}
      >
        <tr>
          <th>Sr.</th>
          <th>State Name</th>
          <th>Constutiency Name</th>
          <th>Constutiency No</th>
          <th>Name of Shifting MP</th>
          <th>Status</th>
          <th><i className="text-white feather icon-edit-1" title='Edit / Update' /></th>
          <th><i className="text-white feather icon-trash-2" title='Delete' /></th>
        </tr>
      </thead>
    </Table>
  </Wrapper>
);

}
}

export default ConstutiencyList;

colin

Have you considered licensing Editor? That has that functionality included.

Colin