accountForm.html

<template>
    <div class="slds-grid slds-gutters">
        <div class="slds-col">
            <span>
                <lightning-input type="Currency" label="AnnualRevenue Start" value={revenueStart} name="AVStart"
                    onchange={handleChange} placeholder="Enter Value"></lightning-input>
            </span>
        </div>
        <div class="slds-col">
            <span>
                <lightning-input type="Currency" label="AnnualRevenue End" value={revenueEnd} name="AVEnd"
                    onchange={handleChange} placeholder="Enter Value"> </lightning-input>
            </span>
        </div>
        <div class="slds-col">
            <span>
                <template if:true={typeValues.data}>
                    <lightning-combobox name="Type" label="Type" value={value} options={typeValues.data.values}
                        onchange={handleChange} placeholder="Select Type">
                    </lightning-combobox>
                </template>
            </span>
        </div>
        <div class="slds-col">
            <span>
                <template if:true={ratingValues.data}>
                    <lightning-combobox name="Rating" label="Rating" value={value} options={ratingValues.data.values}
                        onchange={handleChange} placeholder="Select Rating">
                    </lightning-combobox>
                </template>
            </span>
        </div>
        <div class="slds-col">
            <span>
                <template if:true={industryValues.data}>
                    <lightning-combobox name="Industry" label="Industry" value={value}
                        options={industryValues.data.values} onchange={handleChange} placeholder="Select Industry">
                    </lightning-combobox>
                </template>
            </span>
        </div>
    </div>

    <lightning-button type="submit" variant="brand" label="Show Accounts" onclick={handleClick}></lightning-button>

    <template if:true={showSearchtable}>
        <lightning-datatable key-field="Id" data={accounts} columns={columns} onsave={handleSave}
            draft-values={draftValues} sorted-by={sortBy} sorted-direction={sortDirection} onsort={doSorting}
            hide-checkbox-column="true"></lightning-datatable>
    </template>
    
    <template if:true={showSearchComponent}>
        <p>No data to display</p>
    </template>

    <template if:true={loading}>
        <div class="slds-spinner_container">
            <lightning-spinner alternative-text="Loading" variant="brand" size="medium">
            </lightning-spinner>
        </div>
    </template>
    <div class="slds-m-around_medium">
        <p class="slds-m-vertical_medium content">
            Displaying {startingRecord} to {endingRecord} of {totalRecountCount} records.
            Page {page} of {totalPage}. </p>
        <c-paginator onprevious={previousHandler} onnext={nextHandler}></c-paginator>
    </div>
</template>

accountForm.js

import { LightningElement, wire, track, api } from 'lwc';

import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import Type from '@salesforce/schema/Account.Type';
import Rating from '@salesforce/schema/Account.Rating';
import AnnualRevenue from '@salesforce/schema/Account.AnnualRevenue';
import ChangeRating__c from '@salesforce/schema/Account.ChangeRating__c';

import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Industry from '@salesforce/schema/Account.Industry';

import getAccountList from '@salesforce/apex/AccountForm.getAccountList';



import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';


const columns = [
  { label: 'Account Name', fieldName: 'AccName', type: 'url', sortable: "true", typeAttributes: { label: { fieldName: 'Name' } } },
  { label: 'AnnualRevenue', fieldName: 'AnnualRevenue', type: 'currency', editable: true, sortable: "true" },

  { label: 'Industry', fieldName: 'Industry', editable: true, sortable: "true" },
  { label: 'Type', fieldName: 'Type', editable: true, sortable: "true" },
  { label: 'Rating', fieldName: 'Rating', type: 'picklist', editable: true, sortable: "true" },
  { label: 'Website', fieldName: 'Website', type: 'url', editable: true, sortable: "true" },
  { label: 'ChangeRating', fieldName: 'ChangeRating__c', type: 'number', editable: true, sortable: "true" }
];

let i = 0;
export default class AccountForm extends LightningElement {

  @track page = 1;
  @track items = [];
  @track columns;
  @track startingRecord = 1;
  @track endingRecord = 0;
  @track pageSize = 10;
  @track totalRecountCount = 0;
  @track totalPage = 0;

  @track accounts = [];
  @track showSearchComponent = false;
  @track showSearchtable;
  @track revenueStart;
  @track revenueEnd;
  @track loading = false;
  @track sortBy;
  @track sortDirection;

  @api recordId;
  columns = columns;
  draftValues = [];

  @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
  accountInfo;
  nameVal;
  typeVal;
  industryVal;

  @wire(getPicklistValues, {
    recordTypeId: '$accountInfo.data.defaultRecordTypeId',
    fieldApiName: Type

  })
  typeValues;

  @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: Rating })
  ratingValues;

  @wire(getPicklistValues, { recordTypeId: '$accountInfo.data.defaultRecordTypeId', fieldApiName: Industry })
  industryValues;


  handleChange(event) {
    var fieldname = event.target.label;
    if (fieldname == 'Rating') {
      this.nameVal = event.target.value;
    }
    else if (fieldname == 'Type') {
      this.typeVal = event.target.value;
    } else if (fieldname == 'Industry') {
      this.industryVal = event.target.value;
    }
    else if (fieldname == 'AnnualRevenue Start') {
      this.revenueStart = event.target.value;
    }
    else if (fieldname == 'AnnualRevenue End') {
      this.revenueEnd = event.target.value;
    }
  }

  handleClick() {
    this.showSearchComponent = true;
    this.loading = true;
    console.log('AnnualRevenueStart --> ', this.revenueStart);
    console.log('Anuual end --> ', this.revenueEnd);
    if (this.revenueEnd != null && this.revenueEnd != '' && this.revenueStart != null && this.revenueStart != '' && this.revenueEnd < this.revenueStart) {
      console.log('this.revenueEnd' + this.revenueEnd);
      this.loading = false;
      console.log('Alert message');
      const toastEvt = new ShowToastEvent({
        title: 'Error',
        message: 'AnnualRevenueEnd should not be lesser than AnnualRevenueStart',
        variant: 'error',

      });
      this.dispatchEvent(toastEvt);
    }
    else {
      getAccountList({ type: this.typeVal, rating: this.nameVal, industry: this.industryVal, AnnualRevenueStart: this.revenueStart, AnnualRevenueEnd: this.revenueEnd })
        .then(results => {
          if (results != null) {
            let tempAccList = [];
            results.forEach((result) => {
              let tempAccRec = Object.assign({}, result);
              tempAccRec.AccName = '/' + tempAccRec.Id;
              tempAccList.push(tempAccRec);
              this.showSearchComponent = false;
              this.showSearchtable = true;
              this.accounts = tempAccList;
            });
            if (accounts) {
              this.items = accounts;
              this.totalRecountCount = accounts.length;
              this.totalPage = Math.ceil(this.totalRecountCount / this.pageSize);
              this.accounts = this.items.slice(0, this.pageSize);
              this.endingRecord = this.pageSize;
              this.columns = columns;

              this.error = undefined;
            } else if (error) {
              this.error = error;
              this.accounts = undefined;
            }
          }
          else {
            this.showSearchtable = false;
            this.showSearchComponent = true;
          }
          this.loading = false;
        })
        .catch(error => {
          console.log('error' + error);
          this.loading = false;
        })
    }
  }

  handleSave(event) {
    const recordInputs = event.detail.draftValues.slice().map(draft => {
      const fields = Object.assign({}, draft);
      return { fields };
    });

    const promises = recordInputs.map(recordInput => updateRecord(recordInput));
    Promise.all(promises).then(accounts => {
      this.dispatchEvent(
        new ShowToastEvent({
          title: 'Success',
          message: 'Accounts updated',
          variant: 'success'
        })
      );
      // Clear all draft values
      this.draftValues = [];

      // Display fresh data in the 
      this.handleClick();

    }).catch(error => {
      // Handle error
    });
  }

  doSorting(event) {
    this.sortBy = event.detail.fieldName;
    this.sortDirection = event.detail.sortDirection;
    this.sortData(this.sortBy, this.sortDirection);
  }

  sortData(fieldname, direction) {
    let parseData = JSON.parse(JSON.stringify(this.accounts));

    let keyValue = (a) => {
      return a[fieldname];
    };

    let isReverse = direction === 'asc' ? 1 : -1;

    parseData.sort((x, y) => {
      x = keyValue(x) ? keyValue(x) : '';
      y = keyValue(y) ? keyValue(y) : '';

      return isReverse * ((x > y) - (y > x));
    });
    this.accounts = parseData;
  }

  previousHandler() {
    if (this.page > 1) {
      this.page = this.page - 1;
      this.displayRecordPerPage(this.page);
    }
  }
  nextHandler() {
    if ((this.page < this.totalPage) && this.page !== this.totalPage) {
      this.page = this.page + 1;
      this.displayRecordPerPage(this.page);
    }
  }
  displayRecordPerPage(page) {
    this.startingRecord = ((page - 1) * this.pageSize);
    this.endingRecord = (this.pageSize * page);
    this.endingRecord = (this.endingRecord > this.totalRecountCount)
      ? this.totalRecountCount : this.endingRecord;
    this.accounts = this.items.slice(this.startingRecord, this.endingRecord);
    this.startingRecord = this.startingRecord + 1;
  }
}

AccountForm.cls

public with sharing class AccountForm {
    @AuraEnabled
    public static List<Account>  getAccountList(String type,String rating,String industry,String AnnualRevenueStart,String AnnualRevenueEnd){
        System.debug('AnnualRevenueStart='+AnnualRevenueStart);
        System.debug('AnnualRevenueEnd='+AnnualRevenueEnd);
        String accQuery = 'SELECT Id,Name,Website,Type,Rating,AnnualRevenue,Industry,ChangeRating__c FROM Account';                     
        String whereClause  = '';
        String Query1;
        Integer arStart;
        if(String.isNotEmpty(AnnualRevenueStart)){
            arStart = Integer.valueOf(AnnualRevenueStart);
        }
        Integer arEnd;
        if(String.isNotEmpty(AnnualRevenueEnd)){
            arEnd = Integer.valueOf(AnnualRevenueEnd);
        }
        if(arStart!=Null){
            whereClause=whereClause+' where AnnualRevenue>=:arStart';
        }
        if(arEnd!=Null){
            if(String.isEmpty(whereClause)){
                whereClause=whereClause+' WHERE AnnualRevenue<=:arEnd';
            }
            else 
            {
                whereClause=whereClause+' AND AnnualRevenue<=:arEnd';
            }
        }
        if(String.isNotEmpty(type)){
            if(String.isEmpty(whereClause)){
                whereClause =whereClause +  ' WHERE Type = :type';
            }else{
                whereClause =whereClause + ' AND Type = :type';
            }
            
        }
        if(String.isNotEmpty(rating)){
            if(String.isEmpty(whereClause)){
                whereClause =whereClause +  ' WHERE Rating = :rating';
            }else{
                whereClause =whereClause + ' AND Rating = :rating';
            }
        } 
        if(String.isNotEmpty(industry)){
            if(String.isEmpty(whereClause)){
                whereClause =whereClause +  ' WHERE Industry = :industry';
            }else{
                whereClause =whereClause + ' AND Industry = :industry';
            }
            
        } 
        String finalquery = accQuery+whereClause;
        System.debug('finalquery='+finalquery);
        
        List<Account> acclist=Database.query(finalquery);
        if(acclist.size()>0){
            return acclist;
        }
        else {
            return null;
            
        }
    }  
}

paginator.html

<template>
    <lightning-layout>
        <lightning-layout-item>
            <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}></lightning-button>
        </lightning-layout-item>
        <lightning-layout-item flexibility="grow"></lightning-layout-item>
        <lightning-layout-item>
            <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler}></lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

paginator.js

import { LightningElement} from 'lwc';

export default class Paginator extends LightningElement {
    previousHandler() {
        this.dispatchEvent(new CustomEvent('previous'));
    }

    nextHandler() {
        this.dispatchEvent(new CustomEvent('next'));
    }
}