jQuery DataTables column definition for multiple data fields

Question

I'm using jQuery DataTables with server side processing for my list. But I have a problem: I want to display more than one column data from database in the same column (header). So, how can I define my column?

<?php
$columns = array(
    array( 'db' => 'ass_id', 'dt' => 0 ),
    array( 'db' => 'ass_customer_id',  'dt' => 1 ),
    array( 'db' => 'ass_customer_id',   'dt' => 2 ),
    array( 'db' => 'ass_id', 'dt' => 3 ),
    array( 'db' => 'ass_id', 'dt' => 4 ),
    array( 'db' => 'ass_id', 'dt' => 5 ),
    array( 'db' => 'ass_id', 'dt' => 6 ),
    array( 'db' => 'ass_id', 'dt' => 7 ),
    array( 'db' => 'ass_rec_letter_sent', 'dt' => 8 )
);
?>

In above code, I defined 8-th column as ass_rec_letter_sent but in this same column I have 2 more data fields to display, so I can't understand how can I do this.

Yevhen Horbunkov · Accepted Answer · 2019-05-30 06:47:36Z

1

You may employ columns.render option for that purpose. It accepts your cell data, cell data type, entire row data source and row number/column number as arguments.

So, for your target column you may make up combined field that will contain as many fields as needed referred by corresponding property name.

For instance, if the source data for each row of your table is an object, like:

{id: 'someid', name: 'somename', phone: 'somephone', mail: 'somemail'}

And you would like to merge phone and mail into combined column contacts, you may simply do:

$('#example').DataTable({
  ...
  columns: [
    {title: 'contacts', data: null, render: (data, type, row, meta) => `phone: ${row.phone}, e-mail: ${row.mail}`}
  ]
});

Complete demo of this concept you may find below:

//data sample that mimic response from your back-end PHP script
const srcData = [
  {id: 1, name: 'Steve Rogers', phone: '+1987270123512', mail: '[email protected]'},
  {id: 2, name: 'Tony Stark', phone: '+1987987235143', mail: '[email protected]'},
  {id: 3, name: 'Peter Parker', phone: '+1698701245121', mail: '[email protected]'}
];

//datatables initialization
const dataTable = $('#example').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {title: 'id', data: 'id'},
    {title: 'name', data: 'name'},
    {title: 'contacts', data: null, render: (data, type, row, meta) => `phone: ${row.phone}, e-mail: ${row.mail}`}
  ]
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="example"></table>
</body>
</html>

answered May 30, 2019 at 6:47

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bhumika Over a year ago

Thanks i will apply this but before that now i got another issue that it is showing "Showing 1 to 25 of 5,004 items (filtered from 5,006 total items)" but all data ( 5,006) load in one page. and no any error showing in console and checked parameter and length is 25 so why load all data?

Yevhen Horbunkov Over a year ago

If your original problem is solved by above answer, you may upvote and accept that, then post another question with another issue and I will gladly look into that

TarangP Over a year ago

Now could you please tell me how I can search in this field? since I merge the first and last names, I cannot search. either I can use first_name to search or last_name

Collectives™ on Stack Overflow

jQuery DataTables column definition for multiple data fields

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related