Download the PHP package luizfabianonogueira/data-table-laravel-ssp without Composer

Data Table Laravel - SSP (Server side process)

Installation

You can install the package via composer:

Configuration

In the main layout include the js file

You can include the css file or use your css

Note that when adding the css and js file, a route was defined to fetch the file. This route is created by the DataTableLaravel

In bootstrp/app.php add the following line:

In your model add the following trait:

Usage

for the dataTable to be loaded you need the following structure

Existem duas formas de carregar seus dadosna tabela:

• 1 Dynamic: nesse caso vamos apenas indicar qual é a model a ser utilizada. \ Nesse formato o sistema vai fazer uma abstração de sua model e utilizar uma controller propria para gerar o resultado.

• 2 Static: Nesse formato vamos indicar a rota que será utilizada para carregar os dados. \

Mas para que isso seja possivel é necessário que a rota esteja configurada para retornar os dados no formato correto. \ Veja um exemplo abaixo: Em sua controller adicione o seguinte código:

Observe que utilizamos dtlFilters(), dtlSearch(), dtlOrder() e que são scopes criado pela trait caso queira personalizar crie em sua model

Veja exemplos de scopes:

Em sua model adicione o seguinte código:

Em yourTable.collumn1 você deve substituir pelo nome da tabela e coluna que deseja fazer a busca. Fique a vontade para adicionar quantos campos desejar e alterar conforme sua necessidade. Esses metodos são apenas exemplos de como você pode fazer a busca e filtragem dos dados e podem ser utilizados por qualquer consulta em seu sistema

Agora vamos conhecer as configurações possiveis para a tabela: A configuração é feita através de um json que deve ser passado para o plugin.

Campos de configuração

• request: {... ...}: Objeto que contem as informações necessárias para a requisição dos dados.

  • • request - url: string - Url da rota que será utilizada para carregar os dados.
  • • request - method: string - Método que será utilizado para carregar os dados. (default: GET) \
• • request - dynamicModel: string - Nome da model que será utilizada para carregar os dados. Caso utilize o dynamicModel não é necessário passar a url e method.
• • request - headers: object - Cabeçalhos que serão enviados na requisição. (default: {})
• • request - params: object - Parametros que serão enviados na requisição. (default: {})

• columns: array - Array de objetos que contem as informações das colunas da tabela.

• columns: campos possíveis

  • • columnTitle: string - Título da coluna.
  • • data: informação que será exibido na coluna.
      Deve corresponder ao nome da coluna no seu resultado. Caso seja objeto deve ser utilizado o ponto para acessar o valor. Ex: 'user.name' em render':
  • • render: function - Função que será utilizada para renderizar o conteúdo da coluna.
  • • hidden: boolean - Indica se a coluna é visível. (default: true)
  • • columnSort: string - Defini por qual coluna será ordenado.
  • • headerClass: string - Classe que será aplicada no cabeçalho da coluna.
  • • class: string - Classe que será aplicada na coluna.
  • • style: string - Estilo que será aplicado na coluna.
  • • name: string - Nome da coluna.(alias)
• table: configurações da tabela
  • • table - txtNoResult: string - Mensagem que será exibida quando não houver registros. (default: 'Sem resultados')

• searchBox: configurações da caixa de pesquisa
  • • show: boolean - Indica se a caixa de pesquisa será exibida. [obrigatório].
  • • boxId: string - Id da caixa de pesquisa. caso null o sistema irá criar um id automaticamente.
  • • placeholder: string - Texto que será exibido na caixa de pesquisa. (default: 'Pesquisar')
  • • class: string - Classe que será aplicada na caixa de pesquisa.
  • • style: string - Estilo que será aplicado na caixa de pesquisa.
  • • autoSearch: boolean - Indica se a pesquisa será feita automaticamente. (default: true)
  • • autoSearchOnEnter: boolean - Indica se a pesquisa será feita ao pressionar a tecla enter. (default: true)
  • • autoSearchDelay: number - Tempo de espera para realizar a pesquisa. (default: 500)
  • • autoSearchMinLength: number - Quantidade mínima de caracteres para realizar a pesquisa. (default: 3)
  • • searchInput: object - Configurações da caixa de pesquisa.
    • • searchInput - id: boolean - Indica se a caixa de pesquisa terá um id. (default: false)
    • • searchInput - class: string - Classe que será aplicada na caixa de pesquisa.
    • • searchInput - style: string - Estilo que será aplicado na caixa de pesquisa.

• buttons:
• • buttonShowColumns: oculatar colunas

• • buttonCSV: em desenvolvimento
• • buttonPDF: em desenvolvimento
• • buttonXLS: em desenvolvimento
• translate:

License: LGPL-3.0-or-later

Contact & Support

📞 Phone: +5548991779088
✉️ Email: [email protected]

Support My Work

If you enjoyed this project and would like to support my work, any donation via Pix is greatly appreciated!
Feel free to donate using one of the following Pix keys:

💳 Email Pix Key: [email protected]
📱 Phone Pix Key: 48991779088

Thank you for your support!